@krpkg/ui 0.2.0 → 0.3.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 +60 -50
- package/dist/index.mjs +4 -4
- package/dist/native.d.mts +51 -0
- package/dist/native.d.ts +51 -0
- package/dist/native.js +514 -0
- package/dist/native.js.map +1 -0
- package/dist/native.mjs +431 -0
- package/dist/native.mjs.map +1 -0
- package/package.json +19 -3
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @krpkg/ui
|
|
2
2
|
|
|
3
|
-
Cyber-minimalist design system and
|
|
3
|
+
Cyber-minimalist design system and component library tailored for **Web**, **Tauri Desktop**, and **React Native / Expo Mobile**.
|
|
4
4
|
|
|
5
5
|
Engineered with raw design tokens, dark tactical palettes, low-overhead styling, and modular component architecture.
|
|
6
6
|
|
|
@@ -24,44 +24,16 @@ Using pnpm:
|
|
|
24
24
|
pnpm add @krpkg/ui
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
---
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
## Usage
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
import '@krpkg/ui/styles.css';
|
|
33
|
-
```
|
|
31
|
+
### 1. Web & Tauri Desktop (DOM)
|
|
34
32
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
| Component | Description |
|
|
38
|
-
|---|---|
|
|
39
|
-
| `Button` | Tactical buttons with solid, outline, ghost, and danger variants. |
|
|
40
|
-
| `BracketCard` | Angular card container with technical corner accents. |
|
|
41
|
-
| `CornerFrame` | Framed container with customizable HUD corner markers. |
|
|
42
|
-
| `TerminalWindow` | Command console and shell output viewer container. |
|
|
43
|
-
| `TelemetryBar` | High-density status strip for metrics, latency, and system health. |
|
|
44
|
-
| `TacticalDrawer` | Slide-out overlay drawer for details and side panels. |
|
|
45
|
-
| `HudModal` | Centered modal dialog with tactical border styling and backdrop blur. |
|
|
46
|
-
| `HudToast` | Compact status notification banner. |
|
|
47
|
-
| `CyberSwitch` | Toggle switch with binary cybernetic visual cues. |
|
|
48
|
-
| `SegmentedControl` | Multi-option tab switcher with active slider indicator. |
|
|
49
|
-
| `Input` | Text input field with prefix, suffix, and error states. |
|
|
50
|
-
| `KeyValGrid` | Technical key-value inspection table for telemetry and metadata. |
|
|
51
|
-
| `Badge` | Status and category badges (accent, teal, red, green, muted). |
|
|
52
|
-
| `Dot` | Pulsing or static status indicator dot. |
|
|
53
|
-
| `TechLabel` | Monospace technical label with micro-formatting. |
|
|
54
|
-
| `StickyNote` | Analog-aesthetic memo element in vintage paper tones. |
|
|
55
|
-
| `SpoilerGate` | Blur/reveal privacy guard for sensitive or NSFW content. |
|
|
56
|
-
| `Vinyl` | Turntable vinyl record animation component. |
|
|
57
|
-
| `Breadcrumbs` | Tactical breadcrumb navigation trail. |
|
|
58
|
-
| `BottomBar` | Mobile and compact viewport navigation bar. |
|
|
59
|
-
| `Tooltip` | Contextual micro-tooltip on hover/focus. |
|
|
60
|
-
| `Logo` | Official SVG monogram and logo variants. |
|
|
61
|
-
|
|
62
|
-
## Quick Example
|
|
33
|
+
Import components and the base stylesheet:
|
|
63
34
|
|
|
64
35
|
```tsx
|
|
36
|
+
import '@krpkg/ui/styles.css';
|
|
65
37
|
import React, { useState } from 'react';
|
|
66
38
|
import {
|
|
67
39
|
Button,
|
|
@@ -76,23 +48,56 @@ export function Dashboard() {
|
|
|
76
48
|
|
|
77
49
|
return (
|
|
78
50
|
<BracketCard title="SYSTEM_TELEMETRY">
|
|
79
|
-
<
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
</div>
|
|
86
|
-
|
|
87
|
-
<TerminalWindow title="STDOUT" style={{ marginTop: '1rem' }}>
|
|
51
|
+
<Badge variant="accent">ONLINE</Badge>
|
|
52
|
+
<CyberSwitch checked={active} onChange={setActive} label="DEBUG_MODE" />
|
|
53
|
+
<Button variant="outline" onClick={() => console.log('Ping')}>
|
|
54
|
+
EXECUTE
|
|
55
|
+
</Button>
|
|
56
|
+
<TerminalWindow title="STDOUT">
|
|
88
57
|
<p>Telemetry stream initialized.</p>
|
|
89
|
-
<p>Awaiting instructions...</p>
|
|
90
58
|
</TerminalWindow>
|
|
91
59
|
</BracketCard>
|
|
92
60
|
);
|
|
93
61
|
}
|
|
94
62
|
```
|
|
95
63
|
|
|
64
|
+
### 2. React Native & Expo Mobile (`@krpkg/ui/native`)
|
|
65
|
+
|
|
66
|
+
Native components use native primitives (`View`, `Text`, `Pressable`, `StyleSheet`) and zero DOM overhead:
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
import React, { useState } from 'react';
|
|
70
|
+
import { View } from 'react-native';
|
|
71
|
+
import {
|
|
72
|
+
Button,
|
|
73
|
+
BracketCard,
|
|
74
|
+
Badge,
|
|
75
|
+
Dot,
|
|
76
|
+
TechLabel,
|
|
77
|
+
CyberSwitch,
|
|
78
|
+
} from '@krpkg/ui/native';
|
|
79
|
+
|
|
80
|
+
export function MobileScreen() {
|
|
81
|
+
const [active, setActive] = useState(false);
|
|
82
|
+
|
|
83
|
+
return (
|
|
84
|
+
<BracketCard active={active}>
|
|
85
|
+
<Badge label="ONLINE" variant="accent" />
|
|
86
|
+
<Dot color="accent" />
|
|
87
|
+
<TechLabel label="SYS_CORE" coord="04.81" />
|
|
88
|
+
<CyberSwitch checked={active} onChange={setActive} label="OVERCLOCK" />
|
|
89
|
+
<Button
|
|
90
|
+
label="ENGAGE"
|
|
91
|
+
variant="primary"
|
|
92
|
+
onPress={() => console.log('Engaged')}
|
|
93
|
+
/>
|
|
94
|
+
</BracketCard>
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
96
101
|
## Design Tokens and Themes
|
|
97
102
|
|
|
98
103
|
`@krpkg/ui` ships with pure token definitions accessible in TypeScript or CSS variables:
|
|
@@ -108,7 +113,7 @@ import { colors, typography, spacing, themePalettes } from '@krpkg/ui/tokens';
|
|
|
108
113
|
- **Furina Hydro-Overture (`furina`)**: Abyssal ocean navy with vivid hydro cyan.
|
|
109
114
|
- **Alley Neon-Noir (`alley`)**: Deep dark purple with electric neon magenta.
|
|
110
115
|
|
|
111
|
-
Apply themes by setting the `data-theme` attribute on any DOM ancestor:
|
|
116
|
+
Apply themes on Web by setting the `data-theme` attribute on any DOM ancestor:
|
|
112
117
|
|
|
113
118
|
```html
|
|
114
119
|
<html data-theme="citlali">
|
|
@@ -116,13 +121,18 @@ Apply themes by setting the `data-theme` attribute on any DOM ancestor:
|
|
|
116
121
|
</html>
|
|
117
122
|
```
|
|
118
123
|
|
|
124
|
+
---
|
|
125
|
+
|
|
119
126
|
## Subpath Exports
|
|
120
127
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
128
|
+
| Export Path | Description | Target Environment |
|
|
129
|
+
|---|---|---|
|
|
130
|
+
| `@krpkg/ui` | Core HTML/DOM React components | Web & Tauri Desktop |
|
|
131
|
+
| `@krpkg/ui/native` | React Native & Expo primitives (`Pressable`, `View`, `Text`) | iOS & Android (Expo / RN) |
|
|
132
|
+
| `@krpkg/ui/tokens` | Pure JS/TS color tokens, themes, typography, & spacing | Universal (Web + Mobile) |
|
|
133
|
+
| `@krpkg/ui/utils` | Timestamp, duration, and number formatters | Universal (Web + Mobile) |
|
|
134
|
+
| `@krpkg/ui/styles.css` | Compiled CSS theme variables & baseline resets | Web & Tauri Desktop |
|
|
135
|
+
| `@krpkg/ui/assets/*` | Static SVG icons and graphic assets | Universal |
|
|
126
136
|
|
|
127
137
|
## License
|
|
128
138
|
|
package/dist/index.mjs
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
import {
|
|
2
|
+
formatDuration,
|
|
3
|
+
formatRelativeTime
|
|
4
|
+
} from "./chunk-ZJSL4I3W.mjs";
|
|
1
5
|
import {
|
|
2
6
|
borderRadius,
|
|
3
7
|
colors,
|
|
@@ -7,10 +11,6 @@ import {
|
|
|
7
11
|
tokens,
|
|
8
12
|
typography
|
|
9
13
|
} from "./chunk-HAD2NPEW.mjs";
|
|
10
|
-
import {
|
|
11
|
-
formatDuration,
|
|
12
|
-
formatRelativeTime
|
|
13
|
-
} from "./chunk-ZJSL4I3W.mjs";
|
|
14
14
|
|
|
15
15
|
// src/components/Button.tsx
|
|
16
16
|
import { forwardRef } from "react";
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PressableProps, StyleProp, ViewStyle, TextStyle, ViewProps } from 'react-native';
|
|
3
|
+
|
|
4
|
+
interface NativeButtonProps extends Omit<PressableProps, 'style'> {
|
|
5
|
+
label: string;
|
|
6
|
+
variant?: 'primary' | 'outline' | 'ghost' | 'danger';
|
|
7
|
+
size?: 'sm' | 'md' | 'lg';
|
|
8
|
+
style?: StyleProp<ViewStyle>;
|
|
9
|
+
textStyle?: StyleProp<TextStyle>;
|
|
10
|
+
}
|
|
11
|
+
declare function Button({ label, variant, size, style, textStyle, disabled, ...props }: NativeButtonProps): React.JSX.Element;
|
|
12
|
+
|
|
13
|
+
interface NativeBracketCardProps extends ViewProps {
|
|
14
|
+
active?: boolean;
|
|
15
|
+
style?: StyleProp<ViewStyle>;
|
|
16
|
+
}
|
|
17
|
+
declare function BracketCard({ active, style, children, ...props }: NativeBracketCardProps): React.JSX.Element;
|
|
18
|
+
|
|
19
|
+
interface NativeBadgeProps {
|
|
20
|
+
label: string;
|
|
21
|
+
variant?: 'default' | 'accent' | 'teal' | 'purple' | 'outline';
|
|
22
|
+
style?: StyleProp<ViewStyle>;
|
|
23
|
+
}
|
|
24
|
+
declare function Badge({ label, variant, style }: NativeBadgeProps): React.JSX.Element;
|
|
25
|
+
|
|
26
|
+
interface NativeDotProps {
|
|
27
|
+
color?: 'accent' | 'green' | 'red' | 'teal' | 'purple';
|
|
28
|
+
size?: number;
|
|
29
|
+
style?: StyleProp<ViewStyle>;
|
|
30
|
+
}
|
|
31
|
+
declare function Dot({ color, size, style }: NativeDotProps): React.JSX.Element;
|
|
32
|
+
|
|
33
|
+
interface NativeTechLabelProps {
|
|
34
|
+
label: string;
|
|
35
|
+
jp?: string;
|
|
36
|
+
coord?: string;
|
|
37
|
+
style?: StyleProp<ViewStyle>;
|
|
38
|
+
}
|
|
39
|
+
declare function TechLabel({ label, jp, coord, style }: NativeTechLabelProps): React.JSX.Element;
|
|
40
|
+
|
|
41
|
+
interface NativeCyberSwitchProps {
|
|
42
|
+
checked: boolean;
|
|
43
|
+
onChange: (checked: boolean) => void;
|
|
44
|
+
label?: string;
|
|
45
|
+
sublabel?: string;
|
|
46
|
+
disabled?: boolean;
|
|
47
|
+
style?: StyleProp<ViewStyle>;
|
|
48
|
+
}
|
|
49
|
+
declare function CyberSwitch({ checked, onChange, label, sublabel, disabled, style, }: NativeCyberSwitchProps): React.JSX.Element;
|
|
50
|
+
|
|
51
|
+
export { Badge, BracketCard, Button, CyberSwitch, Dot, type NativeBadgeProps, type NativeBracketCardProps, type NativeButtonProps, type NativeCyberSwitchProps, type NativeDotProps, type NativeTechLabelProps, TechLabel };
|
package/dist/native.d.ts
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PressableProps, StyleProp, ViewStyle, TextStyle, ViewProps } from 'react-native';
|
|
3
|
+
|
|
4
|
+
interface NativeButtonProps extends Omit<PressableProps, 'style'> {
|
|
5
|
+
label: string;
|
|
6
|
+
variant?: 'primary' | 'outline' | 'ghost' | 'danger';
|
|
7
|
+
size?: 'sm' | 'md' | 'lg';
|
|
8
|
+
style?: StyleProp<ViewStyle>;
|
|
9
|
+
textStyle?: StyleProp<TextStyle>;
|
|
10
|
+
}
|
|
11
|
+
declare function Button({ label, variant, size, style, textStyle, disabled, ...props }: NativeButtonProps): React.JSX.Element;
|
|
12
|
+
|
|
13
|
+
interface NativeBracketCardProps extends ViewProps {
|
|
14
|
+
active?: boolean;
|
|
15
|
+
style?: StyleProp<ViewStyle>;
|
|
16
|
+
}
|
|
17
|
+
declare function BracketCard({ active, style, children, ...props }: NativeBracketCardProps): React.JSX.Element;
|
|
18
|
+
|
|
19
|
+
interface NativeBadgeProps {
|
|
20
|
+
label: string;
|
|
21
|
+
variant?: 'default' | 'accent' | 'teal' | 'purple' | 'outline';
|
|
22
|
+
style?: StyleProp<ViewStyle>;
|
|
23
|
+
}
|
|
24
|
+
declare function Badge({ label, variant, style }: NativeBadgeProps): React.JSX.Element;
|
|
25
|
+
|
|
26
|
+
interface NativeDotProps {
|
|
27
|
+
color?: 'accent' | 'green' | 'red' | 'teal' | 'purple';
|
|
28
|
+
size?: number;
|
|
29
|
+
style?: StyleProp<ViewStyle>;
|
|
30
|
+
}
|
|
31
|
+
declare function Dot({ color, size, style }: NativeDotProps): React.JSX.Element;
|
|
32
|
+
|
|
33
|
+
interface NativeTechLabelProps {
|
|
34
|
+
label: string;
|
|
35
|
+
jp?: string;
|
|
36
|
+
coord?: string;
|
|
37
|
+
style?: StyleProp<ViewStyle>;
|
|
38
|
+
}
|
|
39
|
+
declare function TechLabel({ label, jp, coord, style }: NativeTechLabelProps): React.JSX.Element;
|
|
40
|
+
|
|
41
|
+
interface NativeCyberSwitchProps {
|
|
42
|
+
checked: boolean;
|
|
43
|
+
onChange: (checked: boolean) => void;
|
|
44
|
+
label?: string;
|
|
45
|
+
sublabel?: string;
|
|
46
|
+
disabled?: boolean;
|
|
47
|
+
style?: StyleProp<ViewStyle>;
|
|
48
|
+
}
|
|
49
|
+
declare function CyberSwitch({ checked, onChange, label, sublabel, disabled, style, }: NativeCyberSwitchProps): React.JSX.Element;
|
|
50
|
+
|
|
51
|
+
export { Badge, BracketCard, Button, CyberSwitch, Dot, type NativeBadgeProps, type NativeBracketCardProps, type NativeButtonProps, type NativeCyberSwitchProps, type NativeDotProps, type NativeTechLabelProps, TechLabel };
|
package/dist/native.js
ADDED
|
@@ -0,0 +1,514 @@
|
|
|
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/native/index.ts
|
|
21
|
+
var native_exports = {};
|
|
22
|
+
__export(native_exports, {
|
|
23
|
+
Badge: () => Badge,
|
|
24
|
+
BracketCard: () => BracketCard,
|
|
25
|
+
Button: () => Button,
|
|
26
|
+
CyberSwitch: () => CyberSwitch,
|
|
27
|
+
Dot: () => Dot,
|
|
28
|
+
TechLabel: () => TechLabel
|
|
29
|
+
});
|
|
30
|
+
module.exports = __toCommonJS(native_exports);
|
|
31
|
+
|
|
32
|
+
// src/native/Button.tsx
|
|
33
|
+
var import_react_native = require("react-native");
|
|
34
|
+
|
|
35
|
+
// src/tokens.ts
|
|
36
|
+
var colors = {
|
|
37
|
+
// Baseline / Obsidian Dark
|
|
38
|
+
bg: "#0a0a0c",
|
|
39
|
+
bg0: "#0a0a0c",
|
|
40
|
+
bg1: "#111114",
|
|
41
|
+
bg2: "#18181c",
|
|
42
|
+
bg3: "#1f1f24",
|
|
43
|
+
bgCard: "#121215",
|
|
44
|
+
bgCardHover: "#18181d",
|
|
45
|
+
bgCardActive: "#222228",
|
|
46
|
+
border: "#2a2a30",
|
|
47
|
+
borderSubtle: "#1e1e24",
|
|
48
|
+
borderLight: "#3f3f46",
|
|
49
|
+
text: "#f4f4f5",
|
|
50
|
+
text0: "#e2ded6",
|
|
51
|
+
text1: "#b0aca4",
|
|
52
|
+
text2: "#706c66",
|
|
53
|
+
text3: "#4a4844",
|
|
54
|
+
textMuted: "#a1a1aa",
|
|
55
|
+
textDim: "#71717a",
|
|
56
|
+
// Accents & Signals
|
|
57
|
+
accent: "#c49368",
|
|
58
|
+
accentHover: "#d4a478",
|
|
59
|
+
accentDim: "rgba(196, 147, 104, 0.12)",
|
|
60
|
+
accentMuted: "rgba(224, 169, 109, 0.15)",
|
|
61
|
+
teal: "#6a9e9e",
|
|
62
|
+
tealDim: "rgba(106, 158, 158, 0.12)",
|
|
63
|
+
warm: "#a08060",
|
|
64
|
+
redSoft: "#b05050",
|
|
65
|
+
greenSoft: "#6a9a6a",
|
|
66
|
+
danger: "#ef4444",
|
|
67
|
+
success: "#22c55e",
|
|
68
|
+
blue: "#3b82f6",
|
|
69
|
+
purple: "#a855f7",
|
|
70
|
+
// Sticky Note Themes
|
|
71
|
+
sticky1: "#e8e0b8",
|
|
72
|
+
sticky2: "#e0c8c0",
|
|
73
|
+
sticky3: "#c0d0d8",
|
|
74
|
+
sticky4: "#c8d8c0"
|
|
75
|
+
};
|
|
76
|
+
var spacing = {
|
|
77
|
+
none: 0,
|
|
78
|
+
xs: 4,
|
|
79
|
+
sm: 8,
|
|
80
|
+
md: 12,
|
|
81
|
+
lg: 16,
|
|
82
|
+
xl: 24,
|
|
83
|
+
xxl: 32,
|
|
84
|
+
xxxl: 48
|
|
85
|
+
};
|
|
86
|
+
var borderRadius = {
|
|
87
|
+
none: 0,
|
|
88
|
+
sm: 4,
|
|
89
|
+
md: 6,
|
|
90
|
+
lg: 10,
|
|
91
|
+
full: 9999
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
// src/native/Button.tsx
|
|
95
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
96
|
+
function Button({
|
|
97
|
+
label,
|
|
98
|
+
variant = "outline",
|
|
99
|
+
size = "md",
|
|
100
|
+
style,
|
|
101
|
+
textStyle,
|
|
102
|
+
disabled,
|
|
103
|
+
...props
|
|
104
|
+
}) {
|
|
105
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
106
|
+
import_react_native.Pressable,
|
|
107
|
+
{
|
|
108
|
+
disabled,
|
|
109
|
+
style: ({ pressed }) => [
|
|
110
|
+
styles.base,
|
|
111
|
+
styles[variant],
|
|
112
|
+
styles[`size_${size}`],
|
|
113
|
+
pressed && !disabled && styles.pressed,
|
|
114
|
+
disabled && styles.disabled,
|
|
115
|
+
style
|
|
116
|
+
],
|
|
117
|
+
...props,
|
|
118
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
119
|
+
import_react_native.Text,
|
|
120
|
+
{
|
|
121
|
+
style: [
|
|
122
|
+
styles.text,
|
|
123
|
+
styles[`text_${variant}`],
|
|
124
|
+
styles[`textSize_${size}`],
|
|
125
|
+
disabled && styles.textDisabled,
|
|
126
|
+
textStyle
|
|
127
|
+
],
|
|
128
|
+
children: label
|
|
129
|
+
}
|
|
130
|
+
)
|
|
131
|
+
}
|
|
132
|
+
);
|
|
133
|
+
}
|
|
134
|
+
var styles = import_react_native.StyleSheet.create({
|
|
135
|
+
base: {
|
|
136
|
+
borderRadius: borderRadius.sm,
|
|
137
|
+
alignItems: "center",
|
|
138
|
+
justifyContent: "center",
|
|
139
|
+
flexDirection: "row"
|
|
140
|
+
},
|
|
141
|
+
size_sm: {
|
|
142
|
+
paddingVertical: spacing.xs,
|
|
143
|
+
paddingHorizontal: spacing.sm
|
|
144
|
+
},
|
|
145
|
+
size_md: {
|
|
146
|
+
paddingVertical: spacing.sm,
|
|
147
|
+
paddingHorizontal: spacing.lg
|
|
148
|
+
},
|
|
149
|
+
size_lg: {
|
|
150
|
+
paddingVertical: spacing.md,
|
|
151
|
+
paddingHorizontal: spacing.xl
|
|
152
|
+
},
|
|
153
|
+
primary: {
|
|
154
|
+
backgroundColor: colors.accent
|
|
155
|
+
},
|
|
156
|
+
outline: {
|
|
157
|
+
borderWidth: 1,
|
|
158
|
+
borderColor: colors.accent,
|
|
159
|
+
backgroundColor: "transparent"
|
|
160
|
+
},
|
|
161
|
+
ghost: {
|
|
162
|
+
backgroundColor: "transparent"
|
|
163
|
+
},
|
|
164
|
+
danger: {
|
|
165
|
+
backgroundColor: colors.danger
|
|
166
|
+
},
|
|
167
|
+
pressed: {
|
|
168
|
+
opacity: 0.75
|
|
169
|
+
},
|
|
170
|
+
disabled: {
|
|
171
|
+
opacity: 0.4
|
|
172
|
+
},
|
|
173
|
+
text: {
|
|
174
|
+
fontFamily: "monospace",
|
|
175
|
+
fontWeight: "600"
|
|
176
|
+
},
|
|
177
|
+
textSize_sm: {
|
|
178
|
+
fontSize: 12
|
|
179
|
+
},
|
|
180
|
+
textSize_md: {
|
|
181
|
+
fontSize: 14
|
|
182
|
+
},
|
|
183
|
+
textSize_lg: {
|
|
184
|
+
fontSize: 16
|
|
185
|
+
},
|
|
186
|
+
text_primary: {
|
|
187
|
+
color: colors.bg0
|
|
188
|
+
},
|
|
189
|
+
text_outline: {
|
|
190
|
+
color: colors.accent
|
|
191
|
+
},
|
|
192
|
+
text_ghost: {
|
|
193
|
+
color: colors.text0
|
|
194
|
+
},
|
|
195
|
+
text_danger: {
|
|
196
|
+
color: "#ffffff"
|
|
197
|
+
},
|
|
198
|
+
textDisabled: {
|
|
199
|
+
color: colors.textMuted
|
|
200
|
+
}
|
|
201
|
+
});
|
|
202
|
+
|
|
203
|
+
// src/native/BracketCard.tsx
|
|
204
|
+
var import_react_native2 = require("react-native");
|
|
205
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
206
|
+
function BracketCard({
|
|
207
|
+
active = false,
|
|
208
|
+
style,
|
|
209
|
+
children,
|
|
210
|
+
...props
|
|
211
|
+
}) {
|
|
212
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
213
|
+
import_react_native2.View,
|
|
214
|
+
{
|
|
215
|
+
style: [
|
|
216
|
+
styles2.card,
|
|
217
|
+
active && styles2.active,
|
|
218
|
+
style
|
|
219
|
+
],
|
|
220
|
+
...props,
|
|
221
|
+
children: [
|
|
222
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [styles2.corner, styles2.cornerTL, active && styles2.cornerActive] }),
|
|
223
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [styles2.corner, styles2.cornerTR, active && styles2.cornerActive] }),
|
|
224
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [styles2.corner, styles2.cornerBL, active && styles2.cornerActive] }),
|
|
225
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: [styles2.corner, styles2.cornerBR, active && styles2.cornerActive] }),
|
|
226
|
+
children
|
|
227
|
+
]
|
|
228
|
+
}
|
|
229
|
+
);
|
|
230
|
+
}
|
|
231
|
+
var styles2 = import_react_native2.StyleSheet.create({
|
|
232
|
+
card: {
|
|
233
|
+
backgroundColor: colors.bgCard,
|
|
234
|
+
borderWidth: 1,
|
|
235
|
+
borderColor: colors.borderSubtle,
|
|
236
|
+
borderRadius: borderRadius.md,
|
|
237
|
+
padding: spacing.md,
|
|
238
|
+
position: "relative"
|
|
239
|
+
},
|
|
240
|
+
active: {
|
|
241
|
+
borderColor: colors.accent
|
|
242
|
+
},
|
|
243
|
+
corner: {
|
|
244
|
+
position: "absolute",
|
|
245
|
+
width: 6,
|
|
246
|
+
height: 6,
|
|
247
|
+
borderColor: colors.textDim
|
|
248
|
+
},
|
|
249
|
+
cornerActive: {
|
|
250
|
+
borderColor: colors.accent
|
|
251
|
+
},
|
|
252
|
+
cornerTL: {
|
|
253
|
+
top: -1,
|
|
254
|
+
left: -1,
|
|
255
|
+
borderTopWidth: 2,
|
|
256
|
+
borderLeftWidth: 2
|
|
257
|
+
},
|
|
258
|
+
cornerTR: {
|
|
259
|
+
top: -1,
|
|
260
|
+
right: -1,
|
|
261
|
+
borderTopWidth: 2,
|
|
262
|
+
borderRightWidth: 2
|
|
263
|
+
},
|
|
264
|
+
cornerBL: {
|
|
265
|
+
bottom: -1,
|
|
266
|
+
left: -1,
|
|
267
|
+
borderBottomWidth: 2,
|
|
268
|
+
borderLeftWidth: 2
|
|
269
|
+
},
|
|
270
|
+
cornerBR: {
|
|
271
|
+
bottom: -1,
|
|
272
|
+
right: -1,
|
|
273
|
+
borderBottomWidth: 2,
|
|
274
|
+
borderRightWidth: 2
|
|
275
|
+
}
|
|
276
|
+
});
|
|
277
|
+
|
|
278
|
+
// src/native/Badge.tsx
|
|
279
|
+
var import_react_native3 = require("react-native");
|
|
280
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
281
|
+
function Badge({ label, variant = "default", style }) {
|
|
282
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles3.badge, styles3[variant], style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: [styles3.text, styles3[`text_${variant}`]], children: label }) });
|
|
283
|
+
}
|
|
284
|
+
var styles3 = import_react_native3.StyleSheet.create({
|
|
285
|
+
badge: {
|
|
286
|
+
paddingHorizontal: spacing.sm,
|
|
287
|
+
paddingVertical: 2,
|
|
288
|
+
borderRadius: borderRadius.sm,
|
|
289
|
+
alignSelf: "flex-start"
|
|
290
|
+
},
|
|
291
|
+
default: {
|
|
292
|
+
backgroundColor: colors.borderSubtle
|
|
293
|
+
},
|
|
294
|
+
accent: {
|
|
295
|
+
backgroundColor: colors.accentDim,
|
|
296
|
+
borderWidth: 1,
|
|
297
|
+
borderColor: colors.accent
|
|
298
|
+
},
|
|
299
|
+
teal: {
|
|
300
|
+
backgroundColor: colors.tealDim,
|
|
301
|
+
borderWidth: 1,
|
|
302
|
+
borderColor: colors.teal
|
|
303
|
+
},
|
|
304
|
+
purple: {
|
|
305
|
+
backgroundColor: "rgba(168, 85, 247, 0.15)",
|
|
306
|
+
borderWidth: 1,
|
|
307
|
+
borderColor: colors.purple
|
|
308
|
+
},
|
|
309
|
+
outline: {
|
|
310
|
+
borderWidth: 1,
|
|
311
|
+
borderColor: colors.borderLight,
|
|
312
|
+
backgroundColor: "transparent"
|
|
313
|
+
},
|
|
314
|
+
text: {
|
|
315
|
+
fontSize: 11,
|
|
316
|
+
fontFamily: "monospace",
|
|
317
|
+
fontWeight: "700",
|
|
318
|
+
textTransform: "uppercase"
|
|
319
|
+
},
|
|
320
|
+
text_default: {
|
|
321
|
+
color: colors.text1
|
|
322
|
+
},
|
|
323
|
+
text_accent: {
|
|
324
|
+
color: colors.accent
|
|
325
|
+
},
|
|
326
|
+
text_teal: {
|
|
327
|
+
color: colors.teal
|
|
328
|
+
},
|
|
329
|
+
text_purple: {
|
|
330
|
+
color: colors.purple
|
|
331
|
+
},
|
|
332
|
+
text_outline: {
|
|
333
|
+
color: colors.textDim
|
|
334
|
+
}
|
|
335
|
+
});
|
|
336
|
+
|
|
337
|
+
// src/native/Dot.tsx
|
|
338
|
+
var import_react_native4 = require("react-native");
|
|
339
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
340
|
+
function Dot({ color = "accent", size = 6, style }) {
|
|
341
|
+
const colorMap = {
|
|
342
|
+
accent: colors.accent,
|
|
343
|
+
green: colors.success,
|
|
344
|
+
red: colors.danger,
|
|
345
|
+
teal: colors.teal,
|
|
346
|
+
purple: colors.purple
|
|
347
|
+
};
|
|
348
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
349
|
+
import_react_native4.View,
|
|
350
|
+
{
|
|
351
|
+
style: [
|
|
352
|
+
styles4.dot,
|
|
353
|
+
{
|
|
354
|
+
width: size,
|
|
355
|
+
height: size,
|
|
356
|
+
borderRadius: size / 2,
|
|
357
|
+
backgroundColor: colorMap[color]
|
|
358
|
+
},
|
|
359
|
+
style
|
|
360
|
+
]
|
|
361
|
+
}
|
|
362
|
+
);
|
|
363
|
+
}
|
|
364
|
+
var styles4 = import_react_native4.StyleSheet.create({
|
|
365
|
+
dot: {
|
|
366
|
+
alignSelf: "center"
|
|
367
|
+
}
|
|
368
|
+
});
|
|
369
|
+
|
|
370
|
+
// src/native/TechLabel.tsx
|
|
371
|
+
var import_react_native5 = require("react-native");
|
|
372
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
373
|
+
function TechLabel({ label, jp, coord, style }) {
|
|
374
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: [styles5.container, style], children: [
|
|
375
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { style: styles5.label, children: label }),
|
|
376
|
+
jp && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { style: styles5.jp, children: jp }),
|
|
377
|
+
coord && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.Text, { style: styles5.coord, children: [
|
|
378
|
+
"[",
|
|
379
|
+
coord,
|
|
380
|
+
"]"
|
|
381
|
+
] })
|
|
382
|
+
] });
|
|
383
|
+
}
|
|
384
|
+
var styles5 = import_react_native5.StyleSheet.create({
|
|
385
|
+
container: {
|
|
386
|
+
flexDirection: "row",
|
|
387
|
+
alignItems: "center",
|
|
388
|
+
gap: spacing.xs
|
|
389
|
+
},
|
|
390
|
+
label: {
|
|
391
|
+
fontFamily: "monospace",
|
|
392
|
+
fontSize: 12,
|
|
393
|
+
color: colors.text0,
|
|
394
|
+
fontWeight: "700",
|
|
395
|
+
letterSpacing: 0.5
|
|
396
|
+
},
|
|
397
|
+
jp: {
|
|
398
|
+
fontSize: 11,
|
|
399
|
+
color: colors.text2
|
|
400
|
+
},
|
|
401
|
+
coord: {
|
|
402
|
+
fontFamily: "monospace",
|
|
403
|
+
fontSize: 10,
|
|
404
|
+
color: colors.accent
|
|
405
|
+
}
|
|
406
|
+
});
|
|
407
|
+
|
|
408
|
+
// src/native/CyberSwitch.tsx
|
|
409
|
+
var import_react_native6 = require("react-native");
|
|
410
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
411
|
+
function CyberSwitch({
|
|
412
|
+
checked,
|
|
413
|
+
onChange,
|
|
414
|
+
label,
|
|
415
|
+
sublabel,
|
|
416
|
+
disabled = false,
|
|
417
|
+
style
|
|
418
|
+
}) {
|
|
419
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
420
|
+
import_react_native6.Pressable,
|
|
421
|
+
{
|
|
422
|
+
disabled,
|
|
423
|
+
onPress: () => onChange(!checked),
|
|
424
|
+
style: [styles6.container, disabled && styles6.disabled, style],
|
|
425
|
+
children: [
|
|
426
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: [styles6.track, checked && styles6.trackChecked], children: [
|
|
427
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: [styles6.bitText, styles6.bitLeft], children: checked ? "1" : "" }),
|
|
428
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: [styles6.thumb, checked ? styles6.thumbChecked : styles6.thumbUnchecked] }),
|
|
429
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: [styles6.bitText, styles6.bitRight], children: !checked ? "0" : "" })
|
|
430
|
+
] }),
|
|
431
|
+
(label || sublabel) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: styles6.textGroup, children: [
|
|
432
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles6.label, children: label }),
|
|
433
|
+
sublabel && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles6.sublabel, children: sublabel })
|
|
434
|
+
] })
|
|
435
|
+
]
|
|
436
|
+
}
|
|
437
|
+
);
|
|
438
|
+
}
|
|
439
|
+
var styles6 = import_react_native6.StyleSheet.create({
|
|
440
|
+
container: {
|
|
441
|
+
flexDirection: "row",
|
|
442
|
+
alignItems: "center",
|
|
443
|
+
gap: spacing.sm
|
|
444
|
+
},
|
|
445
|
+
disabled: {
|
|
446
|
+
opacity: 0.4
|
|
447
|
+
},
|
|
448
|
+
track: {
|
|
449
|
+
width: 48,
|
|
450
|
+
height: 24,
|
|
451
|
+
borderRadius: borderRadius.sm,
|
|
452
|
+
backgroundColor: colors.bg1,
|
|
453
|
+
borderWidth: 1,
|
|
454
|
+
borderColor: colors.border,
|
|
455
|
+
flexDirection: "row",
|
|
456
|
+
alignItems: "center",
|
|
457
|
+
justifyContent: "space-between",
|
|
458
|
+
paddingHorizontal: 3,
|
|
459
|
+
position: "relative"
|
|
460
|
+
},
|
|
461
|
+
trackChecked: {
|
|
462
|
+
borderColor: colors.accent,
|
|
463
|
+
backgroundColor: colors.accentDim
|
|
464
|
+
},
|
|
465
|
+
thumb: {
|
|
466
|
+
width: 18,
|
|
467
|
+
height: 18,
|
|
468
|
+
borderRadius: borderRadius.sm - 2,
|
|
469
|
+
backgroundColor: colors.borderLight,
|
|
470
|
+
position: "absolute"
|
|
471
|
+
},
|
|
472
|
+
thumbUnchecked: {
|
|
473
|
+
left: 2
|
|
474
|
+
},
|
|
475
|
+
thumbChecked: {
|
|
476
|
+
right: 2,
|
|
477
|
+
backgroundColor: colors.accent
|
|
478
|
+
},
|
|
479
|
+
bitText: {
|
|
480
|
+
fontFamily: "monospace",
|
|
481
|
+
fontSize: 9,
|
|
482
|
+
fontWeight: "700",
|
|
483
|
+
color: colors.text2
|
|
484
|
+
},
|
|
485
|
+
bitLeft: {
|
|
486
|
+
marginLeft: 3
|
|
487
|
+
},
|
|
488
|
+
bitRight: {
|
|
489
|
+
marginRight: 3
|
|
490
|
+
},
|
|
491
|
+
textGroup: {
|
|
492
|
+
flexDirection: "column"
|
|
493
|
+
},
|
|
494
|
+
label: {
|
|
495
|
+
fontFamily: "monospace",
|
|
496
|
+
fontSize: 13,
|
|
497
|
+
color: colors.text0,
|
|
498
|
+
fontWeight: "600"
|
|
499
|
+
},
|
|
500
|
+
sublabel: {
|
|
501
|
+
fontSize: 11,
|
|
502
|
+
color: colors.text2
|
|
503
|
+
}
|
|
504
|
+
});
|
|
505
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
506
|
+
0 && (module.exports = {
|
|
507
|
+
Badge,
|
|
508
|
+
BracketCard,
|
|
509
|
+
Button,
|
|
510
|
+
CyberSwitch,
|
|
511
|
+
Dot,
|
|
512
|
+
TechLabel
|
|
513
|
+
});
|
|
514
|
+
//# sourceMappingURL=native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/native/index.ts","../src/native/Button.tsx","../src/tokens.ts","../src/native/BracketCard.tsx","../src/native/Badge.tsx","../src/native/Dot.tsx","../src/native/TechLabel.tsx","../src/native/CyberSwitch.tsx"],"sourcesContent":["export * from './Button';\nexport * from './BracketCard';\nexport * from './Badge';\nexport * from './Dot';\nexport * from './TechLabel';\nexport * from './CyberSwitch';\n","import React from 'react';\nimport {\n Pressable,\n Text,\n StyleSheet,\n type PressableProps,\n type StyleProp,\n type ViewStyle,\n type TextStyle,\n} from 'react-native';\nimport { colors, spacing, borderRadius } from '../tokens';\n\nexport interface NativeButtonProps extends Omit<PressableProps, 'style'> {\n label: string;\n variant?: 'primary' | 'outline' | 'ghost' | 'danger';\n size?: 'sm' | 'md' | 'lg';\n style?: StyleProp<ViewStyle>;\n textStyle?: StyleProp<TextStyle>;\n}\n\nexport function Button({\n label,\n variant = 'outline',\n size = 'md',\n style,\n textStyle,\n disabled,\n ...props\n}: NativeButtonProps) {\n return (\n <Pressable\n disabled={disabled}\n style={({ pressed }) => [\n styles.base,\n styles[variant],\n styles[`size_${size}`],\n pressed && !disabled && styles.pressed,\n disabled && styles.disabled,\n style,\n ]}\n {...props}\n >\n <Text\n style={[\n styles.text,\n styles[`text_${variant}`],\n styles[`textSize_${size}`],\n disabled && styles.textDisabled,\n textStyle,\n ]}\n >\n {label}\n </Text>\n </Pressable>\n );\n}\n\nconst styles = StyleSheet.create({\n base: {\n borderRadius: borderRadius.sm,\n alignItems: 'center',\n justifyContent: 'center',\n flexDirection: 'row',\n },\n size_sm: {\n paddingVertical: spacing.xs,\n paddingHorizontal: spacing.sm,\n },\n size_md: {\n paddingVertical: spacing.sm,\n paddingHorizontal: spacing.lg,\n },\n size_lg: {\n paddingVertical: spacing.md,\n paddingHorizontal: spacing.xl,\n },\n primary: {\n backgroundColor: colors.accent,\n },\n outline: {\n borderWidth: 1,\n borderColor: colors.accent,\n backgroundColor: 'transparent',\n },\n ghost: {\n backgroundColor: 'transparent',\n },\n danger: {\n backgroundColor: colors.danger,\n },\n pressed: {\n opacity: 0.75,\n },\n disabled: {\n opacity: 0.4,\n },\n text: {\n fontFamily: 'monospace',\n fontWeight: '600',\n },\n textSize_sm: {\n fontSize: 12,\n },\n textSize_md: {\n fontSize: 14,\n },\n textSize_lg: {\n fontSize: 16,\n },\n text_primary: {\n color: colors.bg0,\n },\n text_outline: {\n color: colors.accent,\n },\n text_ghost: {\n color: colors.text0,\n },\n text_danger: {\n color: '#ffffff',\n },\n textDisabled: {\n color: colors.textMuted,\n },\n});\n","/**\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","import React from 'react';\nimport { View, StyleSheet, type ViewProps, type StyleProp, type ViewStyle } from 'react-native';\nimport { colors, spacing, borderRadius } from '../tokens';\n\nexport interface NativeBracketCardProps extends ViewProps {\n active?: boolean;\n style?: StyleProp<ViewStyle>;\n}\n\nexport function BracketCard({\n active = false,\n style,\n children,\n ...props\n}: NativeBracketCardProps) {\n return (\n <View\n style={[\n styles.card,\n active && styles.active,\n style,\n ]}\n {...props}\n >\n <View style={[styles.corner, styles.cornerTL, active && styles.cornerActive]} />\n <View style={[styles.corner, styles.cornerTR, active && styles.cornerActive]} />\n <View style={[styles.corner, styles.cornerBL, active && styles.cornerActive]} />\n <View style={[styles.corner, styles.cornerBR, active && styles.cornerActive]} />\n {children}\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n card: {\n backgroundColor: colors.bgCard,\n borderWidth: 1,\n borderColor: colors.borderSubtle,\n borderRadius: borderRadius.md,\n padding: spacing.md,\n position: 'relative',\n },\n active: {\n borderColor: colors.accent,\n },\n corner: {\n position: 'absolute',\n width: 6,\n height: 6,\n borderColor: colors.textDim,\n },\n cornerActive: {\n borderColor: colors.accent,\n },\n cornerTL: {\n top: -1,\n left: -1,\n borderTopWidth: 2,\n borderLeftWidth: 2,\n },\n cornerTR: {\n top: -1,\n right: -1,\n borderTopWidth: 2,\n borderRightWidth: 2,\n },\n cornerBL: {\n bottom: -1,\n left: -1,\n borderBottomWidth: 2,\n borderLeftWidth: 2,\n },\n cornerBR: {\n bottom: -1,\n right: -1,\n borderBottomWidth: 2,\n borderRightWidth: 2,\n },\n});\n","import React from 'react';\nimport { View, Text, StyleSheet, type ViewStyle, type StyleProp } from 'react-native';\nimport { colors, spacing, borderRadius } from '../tokens';\n\nexport interface NativeBadgeProps {\n label: string;\n variant?: 'default' | 'accent' | 'teal' | 'purple' | 'outline';\n style?: StyleProp<ViewStyle>;\n}\n\nexport function Badge({ label, variant = 'default', style }: NativeBadgeProps) {\n return (\n <View style={[styles.badge, styles[variant], style]}>\n <Text style={[styles.text, styles[`text_${variant}`]]}>{label}</Text>\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n badge: {\n paddingHorizontal: spacing.sm,\n paddingVertical: 2,\n borderRadius: borderRadius.sm,\n alignSelf: 'flex-start',\n },\n default: {\n backgroundColor: colors.borderSubtle,\n },\n accent: {\n backgroundColor: colors.accentDim,\n borderWidth: 1,\n borderColor: colors.accent,\n },\n teal: {\n backgroundColor: colors.tealDim,\n borderWidth: 1,\n borderColor: colors.teal,\n },\n purple: {\n backgroundColor: 'rgba(168, 85, 247, 0.15)',\n borderWidth: 1,\n borderColor: colors.purple,\n },\n outline: {\n borderWidth: 1,\n borderColor: colors.borderLight,\n backgroundColor: 'transparent',\n },\n text: {\n fontSize: 11,\n fontFamily: 'monospace',\n fontWeight: '700',\n textTransform: 'uppercase',\n },\n text_default: {\n color: colors.text1,\n },\n text_accent: {\n color: colors.accent,\n },\n text_teal: {\n color: colors.teal,\n },\n text_purple: {\n color: colors.purple,\n },\n text_outline: {\n color: colors.textDim,\n },\n});\n","import React from 'react';\nimport { View, StyleSheet, type ViewStyle, type StyleProp } from 'react-native';\nimport { colors } from '../tokens';\n\nexport interface NativeDotProps {\n color?: 'accent' | 'green' | 'red' | 'teal' | 'purple';\n size?: number;\n style?: StyleProp<ViewStyle>;\n}\n\nexport function Dot({ color = 'accent', size = 6, style }: NativeDotProps) {\n const colorMap = {\n accent: colors.accent,\n green: colors.success,\n red: colors.danger,\n teal: colors.teal,\n purple: colors.purple,\n };\n\n return (\n <View\n style={[\n styles.dot,\n {\n width: size,\n height: size,\n borderRadius: size / 2,\n backgroundColor: colorMap[color],\n },\n style,\n ]}\n />\n );\n}\n\nconst styles = StyleSheet.create({\n dot: {\n alignSelf: 'center',\n },\n});\n","import React from 'react';\nimport { View, Text, StyleSheet, type ViewStyle, type StyleProp } from 'react-native';\nimport { colors, spacing, borderRadius } from '../tokens';\n\nexport interface NativeTechLabelProps {\n label: string;\n jp?: string;\n coord?: string;\n style?: StyleProp<ViewStyle>;\n}\n\nexport function TechLabel({ label, jp, coord, style }: NativeTechLabelProps) {\n return (\n <View style={[styles.container, style]}>\n <Text style={styles.label}>{label}</Text>\n {jp && <Text style={styles.jp}>{jp}</Text>}\n {coord && <Text style={styles.coord}>[{coord}]</Text>}\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: spacing.xs,\n },\n label: {\n fontFamily: 'monospace',\n fontSize: 12,\n color: colors.text0,\n fontWeight: '700',\n letterSpacing: 0.5,\n },\n jp: {\n fontSize: 11,\n color: colors.text2,\n },\n coord: {\n fontFamily: 'monospace',\n fontSize: 10,\n color: colors.accent,\n },\n});\n","import React from 'react';\nimport { View, Text, Pressable, StyleSheet, type ViewStyle, type StyleProp } from 'react-native';\nimport { colors, spacing, borderRadius } from '../tokens';\n\nexport interface NativeCyberSwitchProps {\n checked: boolean;\n onChange: (checked: boolean) => void;\n label?: string;\n sublabel?: string;\n disabled?: boolean;\n style?: StyleProp<ViewStyle>;\n}\n\nexport function CyberSwitch({\n checked,\n onChange,\n label,\n sublabel,\n disabled = false,\n style,\n}: NativeCyberSwitchProps) {\n return (\n <Pressable\n disabled={disabled}\n onPress={() => onChange(!checked)}\n style={[styles.container, disabled && styles.disabled, style]}\n >\n <View style={[styles.track, checked && styles.trackChecked]}>\n <Text style={[styles.bitText, styles.bitLeft]}>{checked ? '1' : ''}</Text>\n <View style={[styles.thumb, checked ? styles.thumbChecked : styles.thumbUnchecked]} />\n <Text style={[styles.bitText, styles.bitRight]}>{!checked ? '0' : ''}</Text>\n </View>\n {(label || sublabel) && (\n <View style={styles.textGroup}>\n {label && <Text style={styles.label}>{label}</Text>}\n {sublabel && <Text style={styles.sublabel}>{sublabel}</Text>}\n </View>\n )}\n </Pressable>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: spacing.sm,\n },\n disabled: {\n opacity: 0.4,\n },\n track: {\n width: 48,\n height: 24,\n borderRadius: borderRadius.sm,\n backgroundColor: colors.bg1,\n borderWidth: 1,\n borderColor: colors.border,\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n paddingHorizontal: 3,\n position: 'relative',\n },\n trackChecked: {\n borderColor: colors.accent,\n backgroundColor: colors.accentDim,\n },\n thumb: {\n width: 18,\n height: 18,\n borderRadius: borderRadius.sm - 2,\n backgroundColor: colors.borderLight,\n position: 'absolute',\n },\n thumbUnchecked: {\n left: 2,\n },\n thumbChecked: {\n right: 2,\n backgroundColor: colors.accent,\n },\n bitText: {\n fontFamily: 'monospace',\n fontSize: 9,\n fontWeight: '700',\n color: colors.text2,\n },\n bitLeft: {\n marginLeft: 3,\n },\n bitRight: {\n marginRight: 3,\n },\n textGroup: {\n flexDirection: 'column',\n },\n label: {\n fontFamily: 'monospace',\n fontSize: 13,\n color: colors.text0,\n fontWeight: '600',\n },\n sublabel: {\n fontSize: 11,\n color: colors.text2,\n },\n});\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","styles","import_react_native","import_jsx_runtime","styles","import_react_native","import_jsx_runtime","styles","import_react_native","import_jsx_runtime","styles","import_react_native","import_jsx_runtime","styles"]}
|
package/dist/native.mjs
ADDED
|
@@ -0,0 +1,431 @@
|
|
|
1
|
+
import {
|
|
2
|
+
borderRadius,
|
|
3
|
+
colors,
|
|
4
|
+
spacing
|
|
5
|
+
} from "./chunk-HAD2NPEW.mjs";
|
|
6
|
+
|
|
7
|
+
// src/native/Button.tsx
|
|
8
|
+
import {
|
|
9
|
+
Pressable,
|
|
10
|
+
Text,
|
|
11
|
+
StyleSheet
|
|
12
|
+
} from "react-native";
|
|
13
|
+
import { jsx } from "react/jsx-runtime";
|
|
14
|
+
function Button({
|
|
15
|
+
label,
|
|
16
|
+
variant = "outline",
|
|
17
|
+
size = "md",
|
|
18
|
+
style,
|
|
19
|
+
textStyle,
|
|
20
|
+
disabled,
|
|
21
|
+
...props
|
|
22
|
+
}) {
|
|
23
|
+
return /* @__PURE__ */ jsx(
|
|
24
|
+
Pressable,
|
|
25
|
+
{
|
|
26
|
+
disabled,
|
|
27
|
+
style: ({ pressed }) => [
|
|
28
|
+
styles.base,
|
|
29
|
+
styles[variant],
|
|
30
|
+
styles[`size_${size}`],
|
|
31
|
+
pressed && !disabled && styles.pressed,
|
|
32
|
+
disabled && styles.disabled,
|
|
33
|
+
style
|
|
34
|
+
],
|
|
35
|
+
...props,
|
|
36
|
+
children: /* @__PURE__ */ jsx(
|
|
37
|
+
Text,
|
|
38
|
+
{
|
|
39
|
+
style: [
|
|
40
|
+
styles.text,
|
|
41
|
+
styles[`text_${variant}`],
|
|
42
|
+
styles[`textSize_${size}`],
|
|
43
|
+
disabled && styles.textDisabled,
|
|
44
|
+
textStyle
|
|
45
|
+
],
|
|
46
|
+
children: label
|
|
47
|
+
}
|
|
48
|
+
)
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
var styles = StyleSheet.create({
|
|
53
|
+
base: {
|
|
54
|
+
borderRadius: borderRadius.sm,
|
|
55
|
+
alignItems: "center",
|
|
56
|
+
justifyContent: "center",
|
|
57
|
+
flexDirection: "row"
|
|
58
|
+
},
|
|
59
|
+
size_sm: {
|
|
60
|
+
paddingVertical: spacing.xs,
|
|
61
|
+
paddingHorizontal: spacing.sm
|
|
62
|
+
},
|
|
63
|
+
size_md: {
|
|
64
|
+
paddingVertical: spacing.sm,
|
|
65
|
+
paddingHorizontal: spacing.lg
|
|
66
|
+
},
|
|
67
|
+
size_lg: {
|
|
68
|
+
paddingVertical: spacing.md,
|
|
69
|
+
paddingHorizontal: spacing.xl
|
|
70
|
+
},
|
|
71
|
+
primary: {
|
|
72
|
+
backgroundColor: colors.accent
|
|
73
|
+
},
|
|
74
|
+
outline: {
|
|
75
|
+
borderWidth: 1,
|
|
76
|
+
borderColor: colors.accent,
|
|
77
|
+
backgroundColor: "transparent"
|
|
78
|
+
},
|
|
79
|
+
ghost: {
|
|
80
|
+
backgroundColor: "transparent"
|
|
81
|
+
},
|
|
82
|
+
danger: {
|
|
83
|
+
backgroundColor: colors.danger
|
|
84
|
+
},
|
|
85
|
+
pressed: {
|
|
86
|
+
opacity: 0.75
|
|
87
|
+
},
|
|
88
|
+
disabled: {
|
|
89
|
+
opacity: 0.4
|
|
90
|
+
},
|
|
91
|
+
text: {
|
|
92
|
+
fontFamily: "monospace",
|
|
93
|
+
fontWeight: "600"
|
|
94
|
+
},
|
|
95
|
+
textSize_sm: {
|
|
96
|
+
fontSize: 12
|
|
97
|
+
},
|
|
98
|
+
textSize_md: {
|
|
99
|
+
fontSize: 14
|
|
100
|
+
},
|
|
101
|
+
textSize_lg: {
|
|
102
|
+
fontSize: 16
|
|
103
|
+
},
|
|
104
|
+
text_primary: {
|
|
105
|
+
color: colors.bg0
|
|
106
|
+
},
|
|
107
|
+
text_outline: {
|
|
108
|
+
color: colors.accent
|
|
109
|
+
},
|
|
110
|
+
text_ghost: {
|
|
111
|
+
color: colors.text0
|
|
112
|
+
},
|
|
113
|
+
text_danger: {
|
|
114
|
+
color: "#ffffff"
|
|
115
|
+
},
|
|
116
|
+
textDisabled: {
|
|
117
|
+
color: colors.textMuted
|
|
118
|
+
}
|
|
119
|
+
});
|
|
120
|
+
|
|
121
|
+
// src/native/BracketCard.tsx
|
|
122
|
+
import { View, StyleSheet as StyleSheet2 } from "react-native";
|
|
123
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
124
|
+
function BracketCard({
|
|
125
|
+
active = false,
|
|
126
|
+
style,
|
|
127
|
+
children,
|
|
128
|
+
...props
|
|
129
|
+
}) {
|
|
130
|
+
return /* @__PURE__ */ jsxs(
|
|
131
|
+
View,
|
|
132
|
+
{
|
|
133
|
+
style: [
|
|
134
|
+
styles2.card,
|
|
135
|
+
active && styles2.active,
|
|
136
|
+
style
|
|
137
|
+
],
|
|
138
|
+
...props,
|
|
139
|
+
children: [
|
|
140
|
+
/* @__PURE__ */ jsx2(View, { style: [styles2.corner, styles2.cornerTL, active && styles2.cornerActive] }),
|
|
141
|
+
/* @__PURE__ */ jsx2(View, { style: [styles2.corner, styles2.cornerTR, active && styles2.cornerActive] }),
|
|
142
|
+
/* @__PURE__ */ jsx2(View, { style: [styles2.corner, styles2.cornerBL, active && styles2.cornerActive] }),
|
|
143
|
+
/* @__PURE__ */ jsx2(View, { style: [styles2.corner, styles2.cornerBR, active && styles2.cornerActive] }),
|
|
144
|
+
children
|
|
145
|
+
]
|
|
146
|
+
}
|
|
147
|
+
);
|
|
148
|
+
}
|
|
149
|
+
var styles2 = StyleSheet2.create({
|
|
150
|
+
card: {
|
|
151
|
+
backgroundColor: colors.bgCard,
|
|
152
|
+
borderWidth: 1,
|
|
153
|
+
borderColor: colors.borderSubtle,
|
|
154
|
+
borderRadius: borderRadius.md,
|
|
155
|
+
padding: spacing.md,
|
|
156
|
+
position: "relative"
|
|
157
|
+
},
|
|
158
|
+
active: {
|
|
159
|
+
borderColor: colors.accent
|
|
160
|
+
},
|
|
161
|
+
corner: {
|
|
162
|
+
position: "absolute",
|
|
163
|
+
width: 6,
|
|
164
|
+
height: 6,
|
|
165
|
+
borderColor: colors.textDim
|
|
166
|
+
},
|
|
167
|
+
cornerActive: {
|
|
168
|
+
borderColor: colors.accent
|
|
169
|
+
},
|
|
170
|
+
cornerTL: {
|
|
171
|
+
top: -1,
|
|
172
|
+
left: -1,
|
|
173
|
+
borderTopWidth: 2,
|
|
174
|
+
borderLeftWidth: 2
|
|
175
|
+
},
|
|
176
|
+
cornerTR: {
|
|
177
|
+
top: -1,
|
|
178
|
+
right: -1,
|
|
179
|
+
borderTopWidth: 2,
|
|
180
|
+
borderRightWidth: 2
|
|
181
|
+
},
|
|
182
|
+
cornerBL: {
|
|
183
|
+
bottom: -1,
|
|
184
|
+
left: -1,
|
|
185
|
+
borderBottomWidth: 2,
|
|
186
|
+
borderLeftWidth: 2
|
|
187
|
+
},
|
|
188
|
+
cornerBR: {
|
|
189
|
+
bottom: -1,
|
|
190
|
+
right: -1,
|
|
191
|
+
borderBottomWidth: 2,
|
|
192
|
+
borderRightWidth: 2
|
|
193
|
+
}
|
|
194
|
+
});
|
|
195
|
+
|
|
196
|
+
// src/native/Badge.tsx
|
|
197
|
+
import { View as View2, Text as Text2, StyleSheet as StyleSheet3 } from "react-native";
|
|
198
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
199
|
+
function Badge({ label, variant = "default", style }) {
|
|
200
|
+
return /* @__PURE__ */ jsx3(View2, { style: [styles3.badge, styles3[variant], style], children: /* @__PURE__ */ jsx3(Text2, { style: [styles3.text, styles3[`text_${variant}`]], children: label }) });
|
|
201
|
+
}
|
|
202
|
+
var styles3 = StyleSheet3.create({
|
|
203
|
+
badge: {
|
|
204
|
+
paddingHorizontal: spacing.sm,
|
|
205
|
+
paddingVertical: 2,
|
|
206
|
+
borderRadius: borderRadius.sm,
|
|
207
|
+
alignSelf: "flex-start"
|
|
208
|
+
},
|
|
209
|
+
default: {
|
|
210
|
+
backgroundColor: colors.borderSubtle
|
|
211
|
+
},
|
|
212
|
+
accent: {
|
|
213
|
+
backgroundColor: colors.accentDim,
|
|
214
|
+
borderWidth: 1,
|
|
215
|
+
borderColor: colors.accent
|
|
216
|
+
},
|
|
217
|
+
teal: {
|
|
218
|
+
backgroundColor: colors.tealDim,
|
|
219
|
+
borderWidth: 1,
|
|
220
|
+
borderColor: colors.teal
|
|
221
|
+
},
|
|
222
|
+
purple: {
|
|
223
|
+
backgroundColor: "rgba(168, 85, 247, 0.15)",
|
|
224
|
+
borderWidth: 1,
|
|
225
|
+
borderColor: colors.purple
|
|
226
|
+
},
|
|
227
|
+
outline: {
|
|
228
|
+
borderWidth: 1,
|
|
229
|
+
borderColor: colors.borderLight,
|
|
230
|
+
backgroundColor: "transparent"
|
|
231
|
+
},
|
|
232
|
+
text: {
|
|
233
|
+
fontSize: 11,
|
|
234
|
+
fontFamily: "monospace",
|
|
235
|
+
fontWeight: "700",
|
|
236
|
+
textTransform: "uppercase"
|
|
237
|
+
},
|
|
238
|
+
text_default: {
|
|
239
|
+
color: colors.text1
|
|
240
|
+
},
|
|
241
|
+
text_accent: {
|
|
242
|
+
color: colors.accent
|
|
243
|
+
},
|
|
244
|
+
text_teal: {
|
|
245
|
+
color: colors.teal
|
|
246
|
+
},
|
|
247
|
+
text_purple: {
|
|
248
|
+
color: colors.purple
|
|
249
|
+
},
|
|
250
|
+
text_outline: {
|
|
251
|
+
color: colors.textDim
|
|
252
|
+
}
|
|
253
|
+
});
|
|
254
|
+
|
|
255
|
+
// src/native/Dot.tsx
|
|
256
|
+
import { View as View3, StyleSheet as StyleSheet4 } from "react-native";
|
|
257
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
258
|
+
function Dot({ color = "accent", size = 6, style }) {
|
|
259
|
+
const colorMap = {
|
|
260
|
+
accent: colors.accent,
|
|
261
|
+
green: colors.success,
|
|
262
|
+
red: colors.danger,
|
|
263
|
+
teal: colors.teal,
|
|
264
|
+
purple: colors.purple
|
|
265
|
+
};
|
|
266
|
+
return /* @__PURE__ */ jsx4(
|
|
267
|
+
View3,
|
|
268
|
+
{
|
|
269
|
+
style: [
|
|
270
|
+
styles4.dot,
|
|
271
|
+
{
|
|
272
|
+
width: size,
|
|
273
|
+
height: size,
|
|
274
|
+
borderRadius: size / 2,
|
|
275
|
+
backgroundColor: colorMap[color]
|
|
276
|
+
},
|
|
277
|
+
style
|
|
278
|
+
]
|
|
279
|
+
}
|
|
280
|
+
);
|
|
281
|
+
}
|
|
282
|
+
var styles4 = StyleSheet4.create({
|
|
283
|
+
dot: {
|
|
284
|
+
alignSelf: "center"
|
|
285
|
+
}
|
|
286
|
+
});
|
|
287
|
+
|
|
288
|
+
// src/native/TechLabel.tsx
|
|
289
|
+
import { View as View4, Text as Text3, StyleSheet as StyleSheet5 } from "react-native";
|
|
290
|
+
import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
291
|
+
function TechLabel({ label, jp, coord, style }) {
|
|
292
|
+
return /* @__PURE__ */ jsxs2(View4, { style: [styles5.container, style], children: [
|
|
293
|
+
/* @__PURE__ */ jsx5(Text3, { style: styles5.label, children: label }),
|
|
294
|
+
jp && /* @__PURE__ */ jsx5(Text3, { style: styles5.jp, children: jp }),
|
|
295
|
+
coord && /* @__PURE__ */ jsxs2(Text3, { style: styles5.coord, children: [
|
|
296
|
+
"[",
|
|
297
|
+
coord,
|
|
298
|
+
"]"
|
|
299
|
+
] })
|
|
300
|
+
] });
|
|
301
|
+
}
|
|
302
|
+
var styles5 = StyleSheet5.create({
|
|
303
|
+
container: {
|
|
304
|
+
flexDirection: "row",
|
|
305
|
+
alignItems: "center",
|
|
306
|
+
gap: spacing.xs
|
|
307
|
+
},
|
|
308
|
+
label: {
|
|
309
|
+
fontFamily: "monospace",
|
|
310
|
+
fontSize: 12,
|
|
311
|
+
color: colors.text0,
|
|
312
|
+
fontWeight: "700",
|
|
313
|
+
letterSpacing: 0.5
|
|
314
|
+
},
|
|
315
|
+
jp: {
|
|
316
|
+
fontSize: 11,
|
|
317
|
+
color: colors.text2
|
|
318
|
+
},
|
|
319
|
+
coord: {
|
|
320
|
+
fontFamily: "monospace",
|
|
321
|
+
fontSize: 10,
|
|
322
|
+
color: colors.accent
|
|
323
|
+
}
|
|
324
|
+
});
|
|
325
|
+
|
|
326
|
+
// src/native/CyberSwitch.tsx
|
|
327
|
+
import { View as View5, Text as Text4, Pressable as Pressable2, StyleSheet as StyleSheet6 } from "react-native";
|
|
328
|
+
import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
329
|
+
function CyberSwitch({
|
|
330
|
+
checked,
|
|
331
|
+
onChange,
|
|
332
|
+
label,
|
|
333
|
+
sublabel,
|
|
334
|
+
disabled = false,
|
|
335
|
+
style
|
|
336
|
+
}) {
|
|
337
|
+
return /* @__PURE__ */ jsxs3(
|
|
338
|
+
Pressable2,
|
|
339
|
+
{
|
|
340
|
+
disabled,
|
|
341
|
+
onPress: () => onChange(!checked),
|
|
342
|
+
style: [styles6.container, disabled && styles6.disabled, style],
|
|
343
|
+
children: [
|
|
344
|
+
/* @__PURE__ */ jsxs3(View5, { style: [styles6.track, checked && styles6.trackChecked], children: [
|
|
345
|
+
/* @__PURE__ */ jsx6(Text4, { style: [styles6.bitText, styles6.bitLeft], children: checked ? "1" : "" }),
|
|
346
|
+
/* @__PURE__ */ jsx6(View5, { style: [styles6.thumb, checked ? styles6.thumbChecked : styles6.thumbUnchecked] }),
|
|
347
|
+
/* @__PURE__ */ jsx6(Text4, { style: [styles6.bitText, styles6.bitRight], children: !checked ? "0" : "" })
|
|
348
|
+
] }),
|
|
349
|
+
(label || sublabel) && /* @__PURE__ */ jsxs3(View5, { style: styles6.textGroup, children: [
|
|
350
|
+
label && /* @__PURE__ */ jsx6(Text4, { style: styles6.label, children: label }),
|
|
351
|
+
sublabel && /* @__PURE__ */ jsx6(Text4, { style: styles6.sublabel, children: sublabel })
|
|
352
|
+
] })
|
|
353
|
+
]
|
|
354
|
+
}
|
|
355
|
+
);
|
|
356
|
+
}
|
|
357
|
+
var styles6 = StyleSheet6.create({
|
|
358
|
+
container: {
|
|
359
|
+
flexDirection: "row",
|
|
360
|
+
alignItems: "center",
|
|
361
|
+
gap: spacing.sm
|
|
362
|
+
},
|
|
363
|
+
disabled: {
|
|
364
|
+
opacity: 0.4
|
|
365
|
+
},
|
|
366
|
+
track: {
|
|
367
|
+
width: 48,
|
|
368
|
+
height: 24,
|
|
369
|
+
borderRadius: borderRadius.sm,
|
|
370
|
+
backgroundColor: colors.bg1,
|
|
371
|
+
borderWidth: 1,
|
|
372
|
+
borderColor: colors.border,
|
|
373
|
+
flexDirection: "row",
|
|
374
|
+
alignItems: "center",
|
|
375
|
+
justifyContent: "space-between",
|
|
376
|
+
paddingHorizontal: 3,
|
|
377
|
+
position: "relative"
|
|
378
|
+
},
|
|
379
|
+
trackChecked: {
|
|
380
|
+
borderColor: colors.accent,
|
|
381
|
+
backgroundColor: colors.accentDim
|
|
382
|
+
},
|
|
383
|
+
thumb: {
|
|
384
|
+
width: 18,
|
|
385
|
+
height: 18,
|
|
386
|
+
borderRadius: borderRadius.sm - 2,
|
|
387
|
+
backgroundColor: colors.borderLight,
|
|
388
|
+
position: "absolute"
|
|
389
|
+
},
|
|
390
|
+
thumbUnchecked: {
|
|
391
|
+
left: 2
|
|
392
|
+
},
|
|
393
|
+
thumbChecked: {
|
|
394
|
+
right: 2,
|
|
395
|
+
backgroundColor: colors.accent
|
|
396
|
+
},
|
|
397
|
+
bitText: {
|
|
398
|
+
fontFamily: "monospace",
|
|
399
|
+
fontSize: 9,
|
|
400
|
+
fontWeight: "700",
|
|
401
|
+
color: colors.text2
|
|
402
|
+
},
|
|
403
|
+
bitLeft: {
|
|
404
|
+
marginLeft: 3
|
|
405
|
+
},
|
|
406
|
+
bitRight: {
|
|
407
|
+
marginRight: 3
|
|
408
|
+
},
|
|
409
|
+
textGroup: {
|
|
410
|
+
flexDirection: "column"
|
|
411
|
+
},
|
|
412
|
+
label: {
|
|
413
|
+
fontFamily: "monospace",
|
|
414
|
+
fontSize: 13,
|
|
415
|
+
color: colors.text0,
|
|
416
|
+
fontWeight: "600"
|
|
417
|
+
},
|
|
418
|
+
sublabel: {
|
|
419
|
+
fontSize: 11,
|
|
420
|
+
color: colors.text2
|
|
421
|
+
}
|
|
422
|
+
});
|
|
423
|
+
export {
|
|
424
|
+
Badge,
|
|
425
|
+
BracketCard,
|
|
426
|
+
Button,
|
|
427
|
+
CyberSwitch,
|
|
428
|
+
Dot,
|
|
429
|
+
TechLabel
|
|
430
|
+
};
|
|
431
|
+
//# sourceMappingURL=native.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/native/Button.tsx","../src/native/BracketCard.tsx","../src/native/Badge.tsx","../src/native/Dot.tsx","../src/native/TechLabel.tsx","../src/native/CyberSwitch.tsx"],"sourcesContent":["import React from 'react';\nimport {\n Pressable,\n Text,\n StyleSheet,\n type PressableProps,\n type StyleProp,\n type ViewStyle,\n type TextStyle,\n} from 'react-native';\nimport { colors, spacing, borderRadius } from '../tokens';\n\nexport interface NativeButtonProps extends Omit<PressableProps, 'style'> {\n label: string;\n variant?: 'primary' | 'outline' | 'ghost' | 'danger';\n size?: 'sm' | 'md' | 'lg';\n style?: StyleProp<ViewStyle>;\n textStyle?: StyleProp<TextStyle>;\n}\n\nexport function Button({\n label,\n variant = 'outline',\n size = 'md',\n style,\n textStyle,\n disabled,\n ...props\n}: NativeButtonProps) {\n return (\n <Pressable\n disabled={disabled}\n style={({ pressed }) => [\n styles.base,\n styles[variant],\n styles[`size_${size}`],\n pressed && !disabled && styles.pressed,\n disabled && styles.disabled,\n style,\n ]}\n {...props}\n >\n <Text\n style={[\n styles.text,\n styles[`text_${variant}`],\n styles[`textSize_${size}`],\n disabled && styles.textDisabled,\n textStyle,\n ]}\n >\n {label}\n </Text>\n </Pressable>\n );\n}\n\nconst styles = StyleSheet.create({\n base: {\n borderRadius: borderRadius.sm,\n alignItems: 'center',\n justifyContent: 'center',\n flexDirection: 'row',\n },\n size_sm: {\n paddingVertical: spacing.xs,\n paddingHorizontal: spacing.sm,\n },\n size_md: {\n paddingVertical: spacing.sm,\n paddingHorizontal: spacing.lg,\n },\n size_lg: {\n paddingVertical: spacing.md,\n paddingHorizontal: spacing.xl,\n },\n primary: {\n backgroundColor: colors.accent,\n },\n outline: {\n borderWidth: 1,\n borderColor: colors.accent,\n backgroundColor: 'transparent',\n },\n ghost: {\n backgroundColor: 'transparent',\n },\n danger: {\n backgroundColor: colors.danger,\n },\n pressed: {\n opacity: 0.75,\n },\n disabled: {\n opacity: 0.4,\n },\n text: {\n fontFamily: 'monospace',\n fontWeight: '600',\n },\n textSize_sm: {\n fontSize: 12,\n },\n textSize_md: {\n fontSize: 14,\n },\n textSize_lg: {\n fontSize: 16,\n },\n text_primary: {\n color: colors.bg0,\n },\n text_outline: {\n color: colors.accent,\n },\n text_ghost: {\n color: colors.text0,\n },\n text_danger: {\n color: '#ffffff',\n },\n textDisabled: {\n color: colors.textMuted,\n },\n});\n","import React from 'react';\nimport { View, StyleSheet, type ViewProps, type StyleProp, type ViewStyle } from 'react-native';\nimport { colors, spacing, borderRadius } from '../tokens';\n\nexport interface NativeBracketCardProps extends ViewProps {\n active?: boolean;\n style?: StyleProp<ViewStyle>;\n}\n\nexport function BracketCard({\n active = false,\n style,\n children,\n ...props\n}: NativeBracketCardProps) {\n return (\n <View\n style={[\n styles.card,\n active && styles.active,\n style,\n ]}\n {...props}\n >\n <View style={[styles.corner, styles.cornerTL, active && styles.cornerActive]} />\n <View style={[styles.corner, styles.cornerTR, active && styles.cornerActive]} />\n <View style={[styles.corner, styles.cornerBL, active && styles.cornerActive]} />\n <View style={[styles.corner, styles.cornerBR, active && styles.cornerActive]} />\n {children}\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n card: {\n backgroundColor: colors.bgCard,\n borderWidth: 1,\n borderColor: colors.borderSubtle,\n borderRadius: borderRadius.md,\n padding: spacing.md,\n position: 'relative',\n },\n active: {\n borderColor: colors.accent,\n },\n corner: {\n position: 'absolute',\n width: 6,\n height: 6,\n borderColor: colors.textDim,\n },\n cornerActive: {\n borderColor: colors.accent,\n },\n cornerTL: {\n top: -1,\n left: -1,\n borderTopWidth: 2,\n borderLeftWidth: 2,\n },\n cornerTR: {\n top: -1,\n right: -1,\n borderTopWidth: 2,\n borderRightWidth: 2,\n },\n cornerBL: {\n bottom: -1,\n left: -1,\n borderBottomWidth: 2,\n borderLeftWidth: 2,\n },\n cornerBR: {\n bottom: -1,\n right: -1,\n borderBottomWidth: 2,\n borderRightWidth: 2,\n },\n});\n","import React from 'react';\nimport { View, Text, StyleSheet, type ViewStyle, type StyleProp } from 'react-native';\nimport { colors, spacing, borderRadius } from '../tokens';\n\nexport interface NativeBadgeProps {\n label: string;\n variant?: 'default' | 'accent' | 'teal' | 'purple' | 'outline';\n style?: StyleProp<ViewStyle>;\n}\n\nexport function Badge({ label, variant = 'default', style }: NativeBadgeProps) {\n return (\n <View style={[styles.badge, styles[variant], style]}>\n <Text style={[styles.text, styles[`text_${variant}`]]}>{label}</Text>\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n badge: {\n paddingHorizontal: spacing.sm,\n paddingVertical: 2,\n borderRadius: borderRadius.sm,\n alignSelf: 'flex-start',\n },\n default: {\n backgroundColor: colors.borderSubtle,\n },\n accent: {\n backgroundColor: colors.accentDim,\n borderWidth: 1,\n borderColor: colors.accent,\n },\n teal: {\n backgroundColor: colors.tealDim,\n borderWidth: 1,\n borderColor: colors.teal,\n },\n purple: {\n backgroundColor: 'rgba(168, 85, 247, 0.15)',\n borderWidth: 1,\n borderColor: colors.purple,\n },\n outline: {\n borderWidth: 1,\n borderColor: colors.borderLight,\n backgroundColor: 'transparent',\n },\n text: {\n fontSize: 11,\n fontFamily: 'monospace',\n fontWeight: '700',\n textTransform: 'uppercase',\n },\n text_default: {\n color: colors.text1,\n },\n text_accent: {\n color: colors.accent,\n },\n text_teal: {\n color: colors.teal,\n },\n text_purple: {\n color: colors.purple,\n },\n text_outline: {\n color: colors.textDim,\n },\n});\n","import React from 'react';\nimport { View, StyleSheet, type ViewStyle, type StyleProp } from 'react-native';\nimport { colors } from '../tokens';\n\nexport interface NativeDotProps {\n color?: 'accent' | 'green' | 'red' | 'teal' | 'purple';\n size?: number;\n style?: StyleProp<ViewStyle>;\n}\n\nexport function Dot({ color = 'accent', size = 6, style }: NativeDotProps) {\n const colorMap = {\n accent: colors.accent,\n green: colors.success,\n red: colors.danger,\n teal: colors.teal,\n purple: colors.purple,\n };\n\n return (\n <View\n style={[\n styles.dot,\n {\n width: size,\n height: size,\n borderRadius: size / 2,\n backgroundColor: colorMap[color],\n },\n style,\n ]}\n />\n );\n}\n\nconst styles = StyleSheet.create({\n dot: {\n alignSelf: 'center',\n },\n});\n","import React from 'react';\nimport { View, Text, StyleSheet, type ViewStyle, type StyleProp } from 'react-native';\nimport { colors, spacing, borderRadius } from '../tokens';\n\nexport interface NativeTechLabelProps {\n label: string;\n jp?: string;\n coord?: string;\n style?: StyleProp<ViewStyle>;\n}\n\nexport function TechLabel({ label, jp, coord, style }: NativeTechLabelProps) {\n return (\n <View style={[styles.container, style]}>\n <Text style={styles.label}>{label}</Text>\n {jp && <Text style={styles.jp}>{jp}</Text>}\n {coord && <Text style={styles.coord}>[{coord}]</Text>}\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: spacing.xs,\n },\n label: {\n fontFamily: 'monospace',\n fontSize: 12,\n color: colors.text0,\n fontWeight: '700',\n letterSpacing: 0.5,\n },\n jp: {\n fontSize: 11,\n color: colors.text2,\n },\n coord: {\n fontFamily: 'monospace',\n fontSize: 10,\n color: colors.accent,\n },\n});\n","import React from 'react';\nimport { View, Text, Pressable, StyleSheet, type ViewStyle, type StyleProp } from 'react-native';\nimport { colors, spacing, borderRadius } from '../tokens';\n\nexport interface NativeCyberSwitchProps {\n checked: boolean;\n onChange: (checked: boolean) => void;\n label?: string;\n sublabel?: string;\n disabled?: boolean;\n style?: StyleProp<ViewStyle>;\n}\n\nexport function CyberSwitch({\n checked,\n onChange,\n label,\n sublabel,\n disabled = false,\n style,\n}: NativeCyberSwitchProps) {\n return (\n <Pressable\n disabled={disabled}\n onPress={() => onChange(!checked)}\n style={[styles.container, disabled && styles.disabled, style]}\n >\n <View style={[styles.track, checked && styles.trackChecked]}>\n <Text style={[styles.bitText, styles.bitLeft]}>{checked ? '1' : ''}</Text>\n <View style={[styles.thumb, checked ? styles.thumbChecked : styles.thumbUnchecked]} />\n <Text style={[styles.bitText, styles.bitRight]}>{!checked ? '0' : ''}</Text>\n </View>\n {(label || sublabel) && (\n <View style={styles.textGroup}>\n {label && <Text style={styles.label}>{label}</Text>}\n {sublabel && <Text style={styles.sublabel}>{sublabel}</Text>}\n </View>\n )}\n </Pressable>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: spacing.sm,\n },\n disabled: {\n opacity: 0.4,\n },\n track: {\n width: 48,\n height: 24,\n borderRadius: borderRadius.sm,\n backgroundColor: colors.bg1,\n borderWidth: 1,\n borderColor: colors.border,\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n paddingHorizontal: 3,\n position: 'relative',\n },\n trackChecked: {\n borderColor: colors.accent,\n backgroundColor: colors.accentDim,\n },\n thumb: {\n width: 18,\n height: 18,\n borderRadius: borderRadius.sm - 2,\n backgroundColor: colors.borderLight,\n position: 'absolute',\n },\n thumbUnchecked: {\n left: 2,\n },\n thumbChecked: {\n right: 2,\n backgroundColor: colors.accent,\n },\n bitText: {\n fontFamily: 'monospace',\n fontSize: 9,\n fontWeight: '700',\n color: colors.text2,\n },\n bitLeft: {\n marginLeft: 3,\n },\n bitRight: {\n marginRight: 3,\n },\n textGroup: {\n flexDirection: 'column',\n },\n label: {\n fontFamily: 'monospace',\n fontSize: 13,\n color: colors.text0,\n fontWeight: '600',\n },\n sublabel: {\n fontSize: 11,\n color: colors.text2,\n },\n});\n"],"mappings":"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","names":["StyleSheet","jsx","styles","StyleSheet","View","Text","StyleSheet","jsx","View","styles","Text","StyleSheet","View","StyleSheet","jsx","View","styles","StyleSheet","View","Text","StyleSheet","jsx","jsxs","View","styles","Text","StyleSheet","View","Text","Pressable","StyleSheet","jsx","jsxs","Pressable","styles","View","Text","StyleSheet"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@krpkg/ui",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "krpkg Cyber-Minimalist UI Design System & Component Library (Web, Tauri Desktop, &
|
|
3
|
+
"version": "0.3.0",
|
|
4
|
+
"description": "krpkg Cyber-Minimalist UI Design System & Component Library (Web, Tauri Desktop, & React Native / Expo)",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "krpkg",
|
|
7
7
|
"repository": {
|
|
@@ -18,6 +18,11 @@
|
|
|
18
18
|
"import": "./dist/index.mjs",
|
|
19
19
|
"require": "./dist/index.js"
|
|
20
20
|
},
|
|
21
|
+
"./native": {
|
|
22
|
+
"types": "./dist/native.d.ts",
|
|
23
|
+
"import": "./dist/native.mjs",
|
|
24
|
+
"require": "./dist/native.js"
|
|
25
|
+
},
|
|
21
26
|
"./tokens": {
|
|
22
27
|
"types": "./dist/tokens.d.ts",
|
|
23
28
|
"import": "./dist/tokens.mjs",
|
|
@@ -43,13 +48,24 @@
|
|
|
43
48
|
},
|
|
44
49
|
"peerDependencies": {
|
|
45
50
|
"react": ">=18.0.0",
|
|
46
|
-
"react-dom": ">=18.0.0"
|
|
51
|
+
"react-dom": ">=18.0.0",
|
|
52
|
+
"react-native": ">=0.70.0"
|
|
53
|
+
},
|
|
54
|
+
"peerDependenciesMeta": {
|
|
55
|
+
"react-dom": {
|
|
56
|
+
"optional": true
|
|
57
|
+
},
|
|
58
|
+
"react-native": {
|
|
59
|
+
"optional": true
|
|
60
|
+
}
|
|
47
61
|
},
|
|
48
62
|
"devDependencies": {
|
|
49
63
|
"@types/react": "^19.0.0",
|
|
50
64
|
"@types/react-dom": "^19.0.0",
|
|
65
|
+
"@types/react-native": "^0.72.8",
|
|
51
66
|
"react": "^19.0.0",
|
|
52
67
|
"react-dom": "^19.0.0",
|
|
68
|
+
"react-native": "^0.88.1",
|
|
53
69
|
"tsup": "^8.3.6",
|
|
54
70
|
"typescript": "^5.8.2",
|
|
55
71
|
"vitest": "^3.0.7"
|