@placesapp/appy-ui 0.0.1
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 +242 -0
- package/dist/index.d.ts +784 -0
- package/dist/index.js +6105 -0
- package/dist/styles/base.css +135 -0
- package/dist/styles/index.css +13 -0
- package/dist/styles/ios.css +65 -0
- package/dist/styles/material.css +66 -0
- package/dist/styles/overrides.css +32 -0
- package/package.json +90 -0
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
/* appy-ui Base Theme Variables */
|
|
2
|
+
/* These are CSS custom properties that define the theme colors and other design tokens */
|
|
3
|
+
|
|
4
|
+
:root {
|
|
5
|
+
/* Colors - OKLch */
|
|
6
|
+
--background: oklch(0.99 0.002 75);
|
|
7
|
+
--foreground: oklch(0.15 0.01 75);
|
|
8
|
+
--card: oklch(1 0 0);
|
|
9
|
+
--card-foreground: oklch(0.145 0 0);
|
|
10
|
+
--popover: oklch(1 0 0);
|
|
11
|
+
--popover-foreground: oklch(0.145 0 0);
|
|
12
|
+
--primary: oklch(0.65 0.18 45);
|
|
13
|
+
--primary-foreground: oklch(0.99 0.002 75);
|
|
14
|
+
--secondary: oklch(0.97 0 0);
|
|
15
|
+
--secondary-foreground: oklch(0.205 0 0);
|
|
16
|
+
--muted: oklch(0.97 0 0);
|
|
17
|
+
--muted-foreground: oklch(0.556 0 0);
|
|
18
|
+
--accent: oklch(0.65 0.18 45);
|
|
19
|
+
--accent-foreground: oklch(0.99 0.002 75);
|
|
20
|
+
--destructive: oklch(0.58 0.22 27);
|
|
21
|
+
--border: oklch(0.922 0 0);
|
|
22
|
+
--input: oklch(0.922 0 0);
|
|
23
|
+
--ring: oklch(0.65 0.18 45);
|
|
24
|
+
--chart-1: oklch(0.809 0.105 251.813);
|
|
25
|
+
--chart-2: oklch(0.623 0.214 259.815);
|
|
26
|
+
--chart-3: oklch(0.546 0.245 262.881);
|
|
27
|
+
--chart-4: oklch(0.488 0.243 264.376);
|
|
28
|
+
--chart-5: oklch(0.424 0.199 265.638);
|
|
29
|
+
--radius: 0.875rem;
|
|
30
|
+
--sidebar: oklch(0.985 0 0);
|
|
31
|
+
--sidebar-foreground: oklch(0.145 0 0);
|
|
32
|
+
--sidebar-primary: oklch(0.205 0 0);
|
|
33
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
34
|
+
--sidebar-accent: oklch(0.97 0 0);
|
|
35
|
+
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
36
|
+
--sidebar-border: oklch(0.922 0 0);
|
|
37
|
+
--sidebar-ring: oklch(0.708 0 0);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.dark {
|
|
41
|
+
--background: oklch(0.14 0.01 260);
|
|
42
|
+
--foreground: oklch(0.92 0.01 75);
|
|
43
|
+
--card: oklch(0.18 0.01 260);
|
|
44
|
+
--card-foreground: oklch(0.92 0.01 75);
|
|
45
|
+
--popover: oklch(0.18 0.01 260);
|
|
46
|
+
--popover-foreground: oklch(0.92 0.01 75);
|
|
47
|
+
--primary: oklch(0.72 0.18 45);
|
|
48
|
+
--primary-foreground: oklch(0.14 0.01 260);
|
|
49
|
+
--secondary: oklch(0.22 0.01 260);
|
|
50
|
+
--secondary-foreground: oklch(0.92 0.01 75);
|
|
51
|
+
--muted: oklch(0.22 0.01 260);
|
|
52
|
+
--muted-foreground: oklch(0.65 0.01 75);
|
|
53
|
+
--accent: oklch(0.72 0.18 45);
|
|
54
|
+
--accent-foreground: oklch(0.14 0.01 260);
|
|
55
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
56
|
+
--border: oklch(1 0 0 / 10%);
|
|
57
|
+
--input: oklch(1 0 0 / 15%);
|
|
58
|
+
--ring: oklch(0.72 0.18 45);
|
|
59
|
+
--chart-1: oklch(0.809 0.105 251.813);
|
|
60
|
+
--chart-2: oklch(0.623 0.214 259.815);
|
|
61
|
+
--chart-3: oklch(0.546 0.245 262.881);
|
|
62
|
+
--chart-4: oklch(0.488 0.243 264.376);
|
|
63
|
+
--chart-5: oklch(0.424 0.199 265.638);
|
|
64
|
+
--sidebar: oklch(0.18 0.01 260);
|
|
65
|
+
--sidebar-foreground: oklch(0.92 0.01 75);
|
|
66
|
+
--sidebar-primary: oklch(0.72 0.18 45);
|
|
67
|
+
--sidebar-primary-foreground: oklch(0.14 0.01 260);
|
|
68
|
+
--sidebar-accent: oklch(0.22 0.01 260);
|
|
69
|
+
--sidebar-accent-foreground: oklch(0.92 0.01 75);
|
|
70
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
71
|
+
--sidebar-ring: oklch(0.72 0.18 45);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Tailwind theme extension */
|
|
75
|
+
@theme inline {
|
|
76
|
+
--font-sans: 'Inter Variable', sans-serif;
|
|
77
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
78
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
79
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
80
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
81
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
82
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
83
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
84
|
+
--color-sidebar: var(--sidebar);
|
|
85
|
+
--color-chart-5: var(--chart-5);
|
|
86
|
+
--color-chart-4: var(--chart-4);
|
|
87
|
+
--color-chart-3: var(--chart-3);
|
|
88
|
+
--color-chart-2: var(--chart-2);
|
|
89
|
+
--color-chart-1: var(--chart-1);
|
|
90
|
+
--color-ring: var(--ring);
|
|
91
|
+
--color-input: var(--input);
|
|
92
|
+
--color-border: var(--border);
|
|
93
|
+
--color-destructive: var(--destructive);
|
|
94
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
95
|
+
--color-accent: var(--accent);
|
|
96
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
97
|
+
--color-muted: var(--muted);
|
|
98
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
99
|
+
--color-secondary: var(--secondary);
|
|
100
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
101
|
+
--color-primary: var(--primary);
|
|
102
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
103
|
+
--color-popover: var(--popover);
|
|
104
|
+
--color-card-foreground: var(--card-foreground);
|
|
105
|
+
--color-card: var(--card);
|
|
106
|
+
--color-foreground: var(--foreground);
|
|
107
|
+
--color-background: var(--background);
|
|
108
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
109
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
110
|
+
--radius-lg: var(--radius);
|
|
111
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
112
|
+
--radius-2xl: calc(var(--radius) + 8px);
|
|
113
|
+
--radius-3xl: calc(var(--radius) + 12px);
|
|
114
|
+
--radius-4xl: calc(var(--radius) + 16px);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
@layer base {
|
|
118
|
+
* {
|
|
119
|
+
@apply border-border outline-ring/50;
|
|
120
|
+
}
|
|
121
|
+
body {
|
|
122
|
+
@apply relative bg-background font-sans text-foreground;
|
|
123
|
+
}
|
|
124
|
+
html {
|
|
125
|
+
@apply scroll-smooth font-sans select-none;
|
|
126
|
+
padding: env(safe-area-inset-top) env(safe-area-inset-right)
|
|
127
|
+
env(safe-area-inset-bottom) env(safe-area-inset-left);
|
|
128
|
+
background-color: var(--background);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
button:not(:disabled),
|
|
132
|
+
[role='button']:not(:disabled) {
|
|
133
|
+
cursor: pointer;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/* appy-ui Styles */
|
|
2
|
+
/* This file combines all style modules for the component library */
|
|
3
|
+
|
|
4
|
+
/* Custom variants for Tailwind v4 */
|
|
5
|
+
@custom-variant dark (&:is(.dark *));
|
|
6
|
+
@custom-variant ios (&:is(.ios *));
|
|
7
|
+
@custom-variant material (&:is(.material *));
|
|
8
|
+
|
|
9
|
+
/* Import all style modules */
|
|
10
|
+
@import './base.css';
|
|
11
|
+
@import './ios.css';
|
|
12
|
+
@import './material.css';
|
|
13
|
+
@import './overrides.css';
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
/* iOS 26 Liquid Glass Design System */
|
|
2
|
+
|
|
3
|
+
.ios {
|
|
4
|
+
/* Glass Effects */
|
|
5
|
+
--glass-blur: 20px;
|
|
6
|
+
--glass-bg: oklch(1 0 0 / 60%);
|
|
7
|
+
--glass-bg-elevated: oklch(1 0 0 / 70%);
|
|
8
|
+
--glass-border: oklch(1 0 0 / 30%);
|
|
9
|
+
|
|
10
|
+
/* iOS System Colors */
|
|
11
|
+
--ios-blue: oklch(0.65 0.22 255);
|
|
12
|
+
--ios-green: oklch(0.7 0.2 145);
|
|
13
|
+
--ios-red: oklch(0.6 0.25 25);
|
|
14
|
+
--ios-orange: oklch(0.7 0.2 55);
|
|
15
|
+
--ios-yellow: oklch(0.85 0.18 90);
|
|
16
|
+
--ios-teal: oklch(0.7 0.15 195);
|
|
17
|
+
--ios-purple: oklch(0.6 0.2 300);
|
|
18
|
+
|
|
19
|
+
/* Typography - SF Pro */
|
|
20
|
+
--font-sans:
|
|
21
|
+
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
|
|
22
|
+
'Helvetica Neue', sans-serif;
|
|
23
|
+
|
|
24
|
+
/* iOS Corner Radii - pill-shaped / larger */
|
|
25
|
+
--radius: 1.25rem;
|
|
26
|
+
|
|
27
|
+
/* Elevation - iOS uses no shadows, only translucency */
|
|
28
|
+
--elevation-1: none;
|
|
29
|
+
--elevation-2: none;
|
|
30
|
+
--elevation-3: none;
|
|
31
|
+
|
|
32
|
+
/* Interaction */
|
|
33
|
+
--press-scale: 0.97;
|
|
34
|
+
--press-duration: 100ms;
|
|
35
|
+
|
|
36
|
+
/* Separators */
|
|
37
|
+
--separator: oklch(0 0 0 / 8%);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.ios.dark {
|
|
41
|
+
--glass-bg: oklch(0.2 0.02 260 / 60%);
|
|
42
|
+
--glass-bg-elevated: oklch(0.25 0.02 260 / 70%);
|
|
43
|
+
--glass-border: oklch(1 0 0 / 15%);
|
|
44
|
+
--separator: oklch(1 0 0 / 8%);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* iOS Glass Support Check */
|
|
48
|
+
@supports (backdrop-filter: blur(1px)) {
|
|
49
|
+
.ios {
|
|
50
|
+
--glass-supported: 1;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@supports not (backdrop-filter: blur(1px)) {
|
|
55
|
+
.ios {
|
|
56
|
+
--glass-blur: 0;
|
|
57
|
+
--glass-bg: oklch(1 0 0 / 92%);
|
|
58
|
+
--glass-bg-elevated: oklch(1 0 0 / 95%);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.ios.dark {
|
|
62
|
+
--glass-bg: oklch(0.18 0.02 260 / 95%);
|
|
63
|
+
--glass-bg-elevated: oklch(0.22 0.02 260 / 95%);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/* Material 3 Design System */
|
|
2
|
+
|
|
3
|
+
.material {
|
|
4
|
+
/* Glass Effects - Material uses solid surfaces */
|
|
5
|
+
--glass-blur: 0;
|
|
6
|
+
--glass-bg: var(--card);
|
|
7
|
+
--glass-bg-elevated: var(--card);
|
|
8
|
+
--glass-border: transparent;
|
|
9
|
+
|
|
10
|
+
/* M3 Surface Tones */
|
|
11
|
+
--m3-surface: oklch(0.99 0.002 75);
|
|
12
|
+
--m3-surface-container: oklch(0.96 0.003 75);
|
|
13
|
+
--m3-surface-container-high: oklch(0.94 0.004 75);
|
|
14
|
+
--m3-surface-container-highest: oklch(0.92 0.005 75);
|
|
15
|
+
--m3-on-surface: oklch(0.15 0.01 75);
|
|
16
|
+
|
|
17
|
+
/* M3 State Layers */
|
|
18
|
+
--m3-state-hover: oklch(0 0 0 / 8%);
|
|
19
|
+
--m3-state-focus: oklch(0 0 0 / 12%);
|
|
20
|
+
--m3-state-pressed: oklch(0 0 0 / 12%);
|
|
21
|
+
--m3-state-dragged: oklch(0 0 0 / 16%);
|
|
22
|
+
|
|
23
|
+
/* Typography - Roboto */
|
|
24
|
+
--font-sans: 'Roboto', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
|
|
25
|
+
|
|
26
|
+
/* M3 Corner Radius Scale */
|
|
27
|
+
--radius: 0.75rem;
|
|
28
|
+
--radius-xs: 0.25rem;
|
|
29
|
+
--radius-sm: 0.5rem;
|
|
30
|
+
--radius-md: 0.75rem;
|
|
31
|
+
--radius-lg: 1rem;
|
|
32
|
+
--radius-xl: 1.75rem;
|
|
33
|
+
--radius-full: 9999px;
|
|
34
|
+
|
|
35
|
+
/* M3 Elevation Shadows */
|
|
36
|
+
--elevation-1: 0 1px 2px oklch(0 0 0 / 30%), 0 1px 3px 1px oklch(0 0 0 / 15%);
|
|
37
|
+
--elevation-2: 0 1px 2px oklch(0 0 0 / 30%), 0 2px 6px 2px oklch(0 0 0 / 15%);
|
|
38
|
+
--elevation-3: 0 1px 3px oklch(0 0 0 / 30%), 0 4px 8px 3px oklch(0 0 0 / 15%);
|
|
39
|
+
|
|
40
|
+
/* Interaction */
|
|
41
|
+
--press-scale: 1;
|
|
42
|
+
--press-duration: 0ms;
|
|
43
|
+
--ripple-duration: 300ms;
|
|
44
|
+
|
|
45
|
+
/* Separators */
|
|
46
|
+
--separator: oklch(0 0 0 / 12%);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.material.dark {
|
|
50
|
+
--m3-surface: oklch(0.14 0.01 260);
|
|
51
|
+
--m3-surface-container: oklch(0.18 0.01 260);
|
|
52
|
+
--m3-surface-container-high: oklch(0.22 0.01 260);
|
|
53
|
+
--m3-surface-container-highest: oklch(0.26 0.01 260);
|
|
54
|
+
--m3-on-surface: oklch(0.92 0.01 75);
|
|
55
|
+
|
|
56
|
+
--m3-state-hover: oklch(1 0 0 / 8%);
|
|
57
|
+
--m3-state-focus: oklch(1 0 0 / 12%);
|
|
58
|
+
--m3-state-pressed: oklch(1 0 0 / 12%);
|
|
59
|
+
--m3-state-dragged: oklch(1 0 0 / 16%);
|
|
60
|
+
|
|
61
|
+
--elevation-1: 0 1px 3px 1px oklch(0 0 0 / 26%), 0 1px 2px oklch(0 0 0 / 30%);
|
|
62
|
+
--elevation-2: 0 2px 6px 2px oklch(0 0 0 / 26%), 0 1px 2px oklch(0 0 0 / 30%);
|
|
63
|
+
--elevation-3: 0 4px 8px 3px oklch(0 0 0 / 26%), 0 1px 3px oklch(0 0 0 / 30%);
|
|
64
|
+
|
|
65
|
+
--separator: oklch(1 0 0 / 12%);
|
|
66
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/* Platform-Specific Component Overrides */
|
|
2
|
+
/* Uses data-slot attributes for targeting */
|
|
3
|
+
|
|
4
|
+
/* ============================================
|
|
5
|
+
iOS Overrides
|
|
6
|
+
============================================ */
|
|
7
|
+
|
|
8
|
+
/* Card - Shadow effect */
|
|
9
|
+
.ios [data-slot='card'] {
|
|
10
|
+
box-shadow: 0 0 8px oklch(0 0 0 / 8%);
|
|
11
|
+
border: none;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/* ============================================
|
|
15
|
+
Material 3 Overrides
|
|
16
|
+
============================================ */
|
|
17
|
+
|
|
18
|
+
/* Card - Elevation shadow */
|
|
19
|
+
.material [data-slot='card'] {
|
|
20
|
+
box-shadow: var(--elevation-1);
|
|
21
|
+
border: none;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* ============================================
|
|
25
|
+
Performance Optimizations
|
|
26
|
+
============================================ */
|
|
27
|
+
|
|
28
|
+
/* Apply will-change only to animated glass elements */
|
|
29
|
+
.ios [data-slot='dialog-content'],
|
|
30
|
+
.ios [data-slot='sheet-content'] {
|
|
31
|
+
will-change: transform, opacity;
|
|
32
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@placesapp/appy-ui",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"module": "./dist/index.js",
|
|
6
|
+
"types": "./dist/index.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
10
|
+
"import": "./dist/index.js"
|
|
11
|
+
},
|
|
12
|
+
"./styles.css": "./dist/styles/index.css",
|
|
13
|
+
"./styles/base.css": "./dist/styles/base.css",
|
|
14
|
+
"./styles/ios.css": "./dist/styles/ios.css",
|
|
15
|
+
"./styles/material.css": "./dist/styles/material.css",
|
|
16
|
+
"./styles/overrides.css": "./dist/styles/overrides.css"
|
|
17
|
+
},
|
|
18
|
+
"files": [
|
|
19
|
+
"dist"
|
|
20
|
+
],
|
|
21
|
+
"sideEffects": false,
|
|
22
|
+
"peerDependencies": {
|
|
23
|
+
"react": ">=19",
|
|
24
|
+
"react-dom": ">=19",
|
|
25
|
+
"tailwindcss": ">=4"
|
|
26
|
+
},
|
|
27
|
+
"peerDependenciesMeta": {
|
|
28
|
+
"@tanstack/react-form": {
|
|
29
|
+
"optional": true
|
|
30
|
+
},
|
|
31
|
+
"embla-carousel-react": {
|
|
32
|
+
"optional": true
|
|
33
|
+
},
|
|
34
|
+
"recharts": {
|
|
35
|
+
"optional": true
|
|
36
|
+
},
|
|
37
|
+
"react-day-picker": {
|
|
38
|
+
"optional": true
|
|
39
|
+
},
|
|
40
|
+
"cmdk": {
|
|
41
|
+
"optional": true
|
|
42
|
+
},
|
|
43
|
+
"tanstack-theme-kit": {
|
|
44
|
+
"optional": true
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
"dependencies": {
|
|
48
|
+
"@base-ui/react": "^1.1.0",
|
|
49
|
+
"@tabler/icons-react": "^3.31.0",
|
|
50
|
+
"class-variance-authority": "^0.7.1",
|
|
51
|
+
"clsx": "^2.1.1",
|
|
52
|
+
"input-otp": "^1.4.2",
|
|
53
|
+
"motion": "^12.4.7",
|
|
54
|
+
"react-resizable-panels": "^2.1.7",
|
|
55
|
+
"sonner": "^2.0.1",
|
|
56
|
+
"tailwind-merge": "^3.0.1",
|
|
57
|
+
"vaul": "^1.1.2"
|
|
58
|
+
},
|
|
59
|
+
"devDependencies": {
|
|
60
|
+
"@types/react": "19.2.9",
|
|
61
|
+
"@types/react-dom": "19.2.3",
|
|
62
|
+
"cmdk": "^1.1.1",
|
|
63
|
+
"embla-carousel-react": "^8.6.0",
|
|
64
|
+
"react-day-picker": "^9.13.0",
|
|
65
|
+
"recharts": "^3.7.0",
|
|
66
|
+
"tanstack-theme-kit": "^0.2.1",
|
|
67
|
+
"tsup": "^8.3.5",
|
|
68
|
+
"typescript": "^5.7.3"
|
|
69
|
+
},
|
|
70
|
+
"scripts": {
|
|
71
|
+
"build": "tsup && npm run build:css",
|
|
72
|
+
"build:css": "cp -r src/styles dist/",
|
|
73
|
+
"dev": "tsup --watch",
|
|
74
|
+
"prepublishOnly": "npm run build"
|
|
75
|
+
},
|
|
76
|
+
"repository": {
|
|
77
|
+
"type": "git",
|
|
78
|
+
"url": "git+https://github.com/your-org/appy-ui.git"
|
|
79
|
+
},
|
|
80
|
+
"license": "MIT",
|
|
81
|
+
"keywords": [
|
|
82
|
+
"react",
|
|
83
|
+
"ui",
|
|
84
|
+
"components",
|
|
85
|
+
"tailwind",
|
|
86
|
+
"ios",
|
|
87
|
+
"material",
|
|
88
|
+
"design-system"
|
|
89
|
+
]
|
|
90
|
+
}
|