@ceebee/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.
Files changed (6) hide show
  1. package/README.md +1 -2
  2. package/dist/index.d.ts +5 -2
  3. package/dist/index.js +2 -0
  4. package/dist/skins/clarity.css +78 -0
  5. package/dist/styles.css +42 -8
  6. package/package.json +6 -14
package/README.md CHANGED
@@ -25,7 +25,6 @@ from `@ceebee/ui/client`.
25
25
  ## Requirements
26
26
 
27
27
  - React and React DOM 19 or newer
28
- - `@base-ui/react` and `motion`
29
- - `lucide-react` and `embla-carousel-react` only when using components that need them
28
+ - `@base-ui/react`, `motion`, `lucide-react`, and `embla-carousel-react` as runtime peers
30
29
 
31
30
  Licensed under MIT.
package/dist/index.d.ts CHANGED
@@ -9,8 +9,11 @@ type Size = 'sm' | 'md' | 'lg';
9
9
  type DecorHue = 'violet' | 'blue' | 'teal' | 'green' | 'amber' | 'rose';
10
10
 
11
11
  type SurfaceVariant = 'plain' | 'tinted' | 'glass' | 'gradient';
12
+ type GlassStyle = 'regular' | 'clear';
12
13
  interface SurfaceProps {
13
14
  variant?: SurfaceVariant;
15
+ /** Glass density. `clear` is reserved for bold controls over visually rich content. */
16
+ glassStyle?: GlassStyle;
14
17
  /** Semantic colour for `tinted`; ignored by `plain`. */
15
18
  tone?: Tone;
16
19
  /** Decorative hue for `tinted` / `gradient` — the pastel card set. Wins over `tone`. */
@@ -29,7 +32,7 @@ interface SurfaceProps {
29
32
  * variants rather than being baked into the brand (ADR 0002), so one Skin reproduces the
30
33
  * reference board and another produces something sober without touching a component.
31
34
  */
32
- declare function Surface({ variant, tone, hue, elevation, radius, padding, bordered, className, children, asSection, }: SurfaceProps): react.JSX.Element;
35
+ declare function Surface({ variant, glassStyle, tone, hue, elevation, radius, padding, bordered, className, children, asSection, }: SurfaceProps): react.JSX.Element;
33
36
 
34
37
  type SpaceStep = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
35
38
  interface StackProps {
@@ -414,4 +417,4 @@ interface StatCardSkeletonProps {
414
417
  /** Built from StatCard's own spacing, so the tile does not resize when data arrives (ADR 0009). */
415
418
  declare function StatCardSkeleton({ withVisual, className }: StatCardSkeletonProps): react.JSX.Element;
416
419
 
417
- export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, BarMini, type BarMiniProps, Breadcrumbs, type BreadcrumbsProps, Container, type ContainerProps, type Crumb, type DecorHue, Donut, type DonutArc, type DonutProps, type DonutSlice, EmptyState, type EmptyStateProps, Grid, type GridProps, Heading, type HeadingProps, Leaderboard, type LeaderboardEntry, type LeaderboardProps, type LeaderboardSkeletonProps, ProgressBar, type ProgressBarProps, ProgressRing, type ProgressRingProps, type RingGeometry, type Size, Skeleton, type SkeletonProps, type SkeletonTextProps, Sparkline, type SparklineGeometry, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackProps, StatCard, type StatCardProps, type StatCardSkeletonProps, type Step, Stepper, type StepperProps, Surface, type SurfaceProps, type SurfaceVariant, Text, type TextProps, Timeline, type TimelineEntry, type TimelineProps, type TimelineSkeletonProps, type Tone, cn, donutArcs, hueForName, initialsOf, ringGeometry, sparklineGeometry };
420
+ export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, BarMini, type BarMiniProps, Breadcrumbs, type BreadcrumbsProps, Container, type ContainerProps, type Crumb, type DecorHue, Donut, type DonutArc, type DonutProps, type DonutSlice, EmptyState, type EmptyStateProps, type GlassStyle, Grid, type GridProps, Heading, type HeadingProps, Leaderboard, type LeaderboardEntry, type LeaderboardProps, type LeaderboardSkeletonProps, ProgressBar, type ProgressBarProps, ProgressRing, type ProgressRingProps, type RingGeometry, type Size, Skeleton, type SkeletonProps, type SkeletonTextProps, Sparkline, type SparklineGeometry, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackProps, StatCard, type StatCardProps, type StatCardSkeletonProps, type Step, Stepper, type StepperProps, Surface, type SurfaceProps, type SurfaceVariant, Text, type TextProps, Timeline, type TimelineEntry, type TimelineProps, type TimelineSkeletonProps, type Tone, cn, donutArcs, hueForName, initialsOf, ringGeometry, sparklineGeometry };
package/dist/index.js CHANGED
@@ -7,6 +7,7 @@ function cn(...parts) {
7
7
  }
8
8
  function Surface({
9
9
  variant = "plain",
10
+ glassStyle = "regular",
10
11
  tone = "neutral",
11
12
  hue,
12
13
  elevation = "sm",
@@ -32,6 +33,7 @@ function Surface({
32
33
  ),
33
34
  "data-tone": variant === "plain" ? void 0 : tone,
34
35
  "data-hue": hue,
36
+ "data-glass-style": variant === "glass" ? glassStyle : void 0,
35
37
  children
36
38
  }
37
39
  );
package/dist/skins/clarity.css ADDED
@@ -0,0 +1,78 @@
1
+ /* Clarity: CeeBee's content-first glass skin. It follows the hierarchy and adaptivity principles
2
+ of modern system materials without pretending CSS can reproduce a native compositor. */
3
+ :root {
4
+ --cb-hue-brand: 264;
5
+
6
+ --cb-bg: oklch(0.98 0.012 255);
7
+ --cb-bg-subtle: oklch(0.945 0.026 258);
8
+ --cb-surface: oklch(0.995 0.003 255);
9
+ --cb-surface-raised: oklch(1 0 0);
10
+ --cb-border: oklch(0.86 0.018 255);
11
+ --cb-border-strong: oklch(0.62 0.028 255);
12
+
13
+ --cb-shadow-sm: 0 2px 8px oklch(0.32 0.06 260 / 0.08);
14
+ --cb-shadow-md: 0 10px 32px oklch(0.32 0.07 260 / 0.12);
15
+ --cb-shadow-lg: 0 28px 72px oklch(0.28 0.08 260 / 0.17);
16
+
17
+ --cb-glass-bg: oklch(0.99 0.008 255 / 0.64);
18
+ --cb-glass-bg-opaque: oklch(0.97 0.014 255);
19
+ --cb-glass-border: oklch(1 0 0 / 0.72);
20
+ --cb-glass-border-strong: oklch(0.58 0.03 255);
21
+ --cb-glass-blur: 24px;
22
+ --cb-glass-saturation: 1.35;
23
+ --cb-glass-specular: linear-gradient(145deg, oklch(1 0 0 / 0.58), transparent 40%);
24
+ --cb-glass-inset: inset 0 1px 0 oklch(1 0 0 / 0.78), inset 0 -1px 0 oklch(0.28 0.05 260 / 0.1);
25
+
26
+ --cb-glass-clear-bg: oklch(0.99 0.006 255 / 0.3);
27
+ --cb-glass-clear-border: oklch(1 0 0 / 0.78);
28
+ --cb-glass-clear-blur: 14px;
29
+ --cb-glass-clear-saturation: 1.2;
30
+ --cb-glass-clear-specular: linear-gradient(145deg, oklch(1 0 0 / 0.66), transparent 34%);
31
+ --cb-glass-clear-inset: inset 0 1px 0 oklch(1 0 0 / 0.84), inset 0 -1px 0 oklch(0.28 0.05 260 / 0.08);
32
+ }
33
+
34
+ :root[data-theme="dark"] {
35
+ --cb-bg: oklch(0.14 0.025 265);
36
+ --cb-bg-subtle: oklch(0.19 0.035 265);
37
+ --cb-surface: oklch(0.21 0.03 265);
38
+ --cb-surface-raised: oklch(0.25 0.032 265);
39
+ --cb-border: oklch(0.38 0.035 265);
40
+ --cb-border-strong: oklch(0.58 0.038 265);
41
+
42
+ --cb-glass-bg: oklch(0.24 0.032 265 / 0.62);
43
+ --cb-glass-bg-opaque: oklch(0.21 0.03 265);
44
+ --cb-glass-border: oklch(0.9 0.018 255 / 0.2);
45
+ --cb-glass-border-strong: oklch(0.76 0.025 255);
46
+ --cb-glass-specular: linear-gradient(145deg, oklch(1 0 0 / 0.24), transparent 40%);
47
+ --cb-glass-inset: inset 0 1px 0 oklch(1 0 0 / 0.3), inset 0 -1px 0 oklch(0 0 0 / 0.38);
48
+
49
+ --cb-glass-clear-bg: oklch(0.2 0.026 265 / 0.34);
50
+ --cb-glass-clear-border: oklch(0.9 0.018 255 / 0.28);
51
+ --cb-glass-clear-saturation: 1.12;
52
+ --cb-glass-clear-specular: linear-gradient(145deg, oklch(1 0 0 / 0.3), transparent 34%);
53
+ --cb-glass-clear-inset: inset 0 1px 0 oklch(1 0 0 / 0.36), inset 0 -1px 0 oklch(0 0 0 / 0.3);
54
+ }
55
+
56
+ @media (prefers-color-scheme: dark) {
57
+ :root:not([data-theme="light"]) {
58
+ --cb-bg: oklch(0.14 0.025 265);
59
+ --cb-bg-subtle: oklch(0.19 0.035 265);
60
+ --cb-surface: oklch(0.21 0.03 265);
61
+ --cb-surface-raised: oklch(0.25 0.032 265);
62
+ --cb-border: oklch(0.38 0.035 265);
63
+ --cb-border-strong: oklch(0.58 0.038 265);
64
+
65
+ --cb-glass-bg: oklch(0.24 0.032 265 / 0.62);
66
+ --cb-glass-bg-opaque: oklch(0.21 0.03 265);
67
+ --cb-glass-border: oklch(0.9 0.018 255 / 0.2);
68
+ --cb-glass-border-strong: oklch(0.76 0.025 255);
69
+ --cb-glass-specular: linear-gradient(145deg, oklch(1 0 0 / 0.24), transparent 40%);
70
+ --cb-glass-inset: inset 0 1px 0 oklch(1 0 0 / 0.3), inset 0 -1px 0 oklch(0 0 0 / 0.38);
71
+
72
+ --cb-glass-clear-bg: oklch(0.2 0.026 265 / 0.34);
73
+ --cb-glass-clear-border: oklch(0.9 0.018 255 / 0.28);
74
+ --cb-glass-clear-saturation: 1.12;
75
+ --cb-glass-clear-specular: linear-gradient(145deg, oklch(1 0 0 / 0.3), transparent 34%);
76
+ --cb-glass-clear-inset: inset 0 1px 0 oklch(1 0 0 / 0.36), inset 0 -1px 0 oklch(0 0 0 / 0.3);
77
+ }
78
+ }
package/dist/styles.css CHANGED
@@ -119,6 +119,12 @@
119
119
  --cb-glass-saturation: 1.4;
120
120
  --cb-glass-specular: linear-gradient(145deg, oklch(1 0 0 / 0.34), transparent 42%);
121
121
  --cb-glass-inset: inset 0 1px 0 oklch(1 0 0 / 0.62), inset 0 -1px 0 oklch(0.3 0.03 280 / 0.1);
122
+ --cb-glass-clear-bg: oklch(1 0 0 / 0.34);
123
+ --cb-glass-clear-border: oklch(1 0 0 / 0.68);
124
+ --cb-glass-clear-blur: 12px;
125
+ --cb-glass-clear-saturation: 1.25;
126
+ --cb-glass-clear-specular: linear-gradient(145deg, oklch(1 0 0 / 0.42), transparent 38%);
127
+ --cb-glass-clear-inset: inset 0 1px 0 oklch(1 0 0 / 0.72), inset 0 -1px 0 oklch(0.3 0.03 280 / 0.08);
122
128
 
123
129
  --cb-tint-strength: 0.09;
124
130
  --cb-gradient-angle: 145deg;
@@ -156,6 +162,12 @@
156
162
  --cb-glass-saturation: 1.25;
157
163
  --cb-glass-specular: linear-gradient(145deg, oklch(1 0 0 / 0.18), transparent 42%);
158
164
  --cb-glass-inset: inset 0 1px 0 oklch(1 0 0 / 0.26), inset 0 -1px 0 oklch(0 0 0 / 0.34);
165
+ --cb-glass-clear-bg: oklch(0.24 0.025 280 / 0.34);
166
+ --cb-glass-clear-border: oklch(0.88 0.015 280 / 0.24);
167
+ --cb-glass-clear-blur: 14px;
168
+ --cb-glass-clear-saturation: 1.15;
169
+ --cb-glass-clear-specular: linear-gradient(145deg, oklch(1 0 0 / 0.24), transparent 38%);
170
+ --cb-glass-clear-inset: inset 0 1px 0 oklch(1 0 0 / 0.32), inset 0 -1px 0 oklch(0 0 0 / 0.28);
159
171
 
160
172
  --cb-scrim: oklch(0.08 0.01 280 / 0.6);
161
173
  --cb-scrim-strong: oklch(0.08 0.01 280 / 0.7);
@@ -192,6 +204,12 @@
192
204
  --cb-glass-saturation: 1.25;
193
205
  --cb-glass-specular: linear-gradient(145deg, oklch(1 0 0 / 0.18), transparent 42%);
194
206
  --cb-glass-inset: inset 0 1px 0 oklch(1 0 0 / 0.26), inset 0 -1px 0 oklch(0 0 0 / 0.34);
207
+ --cb-glass-clear-bg: oklch(0.24 0.025 280 / 0.34);
208
+ --cb-glass-clear-border: oklch(0.88 0.015 280 / 0.24);
209
+ --cb-glass-clear-blur: 14px;
210
+ --cb-glass-clear-saturation: 1.15;
211
+ --cb-glass-clear-specular: linear-gradient(145deg, oklch(1 0 0 / 0.24), transparent 38%);
212
+ --cb-glass-clear-inset: inset 0 1px 0 oklch(1 0 0 / 0.32), inset 0 -1px 0 oklch(0 0 0 / 0.28);
195
213
 
196
214
  --cb-scrim: oklch(0.08 0.01 280 / 0.6);
197
215
  --cb-scrim-strong: oklch(0.08 0.01 280 / 0.7);
@@ -311,11 +329,27 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
311
329
  }
312
330
 
313
331
  .cb-surface--glass {
314
- background: var(--cb-glass-specular), var(--cb-glass-bg);
315
- border-color: var(--cb-glass-border);
316
- backdrop-filter: blur(var(--cb-glass-blur)) saturate(var(--cb-glass-saturation));
317
- -webkit-backdrop-filter: blur(var(--cb-glass-blur)) saturate(var(--cb-glass-saturation));
318
- --cb-surface-material-shadow: var(--cb-glass-inset);
332
+ --cb-glass-fill: var(--cb-glass-bg);
333
+ --cb-glass-opaque-fill: var(--cb-glass-bg-opaque);
334
+ --cb-glass-edge: var(--cb-glass-border);
335
+ --cb-glass-material-blur: var(--cb-glass-blur);
336
+ --cb-glass-material-saturation: var(--cb-glass-saturation);
337
+ --cb-glass-material-specular: var(--cb-glass-specular);
338
+ --cb-glass-material-inset: var(--cb-glass-inset);
339
+ background: var(--cb-glass-material-specular), var(--cb-glass-fill);
340
+ border-color: var(--cb-glass-edge);
341
+ backdrop-filter: blur(var(--cb-glass-material-blur)) saturate(var(--cb-glass-material-saturation));
342
+ -webkit-backdrop-filter: blur(var(--cb-glass-material-blur)) saturate(var(--cb-glass-material-saturation));
343
+ --cb-surface-material-shadow: var(--cb-glass-material-inset);
344
+ }
345
+
346
+ .cb-surface--glass[data-glass-style="clear"] {
347
+ --cb-glass-fill: var(--cb-glass-clear-bg);
348
+ --cb-glass-edge: var(--cb-glass-clear-border);
349
+ --cb-glass-material-blur: var(--cb-glass-clear-blur);
350
+ --cb-glass-material-saturation: var(--cb-glass-clear-saturation);
351
+ --cb-glass-material-specular: var(--cb-glass-clear-specular);
352
+ --cb-glass-material-inset: var(--cb-glass-clear-inset);
319
353
  }
320
354
 
321
355
  .cb-surface--gradient {
@@ -333,12 +367,12 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
333
367
  .cb-elevation--lg { box-shadow: var(--cb-surface-material-shadow), var(--cb-shadow-lg); }
334
368
 
335
369
  @supports not ((backdrop-filter: blur(var(--cb-glass-blur))) or (-webkit-backdrop-filter: blur(var(--cb-glass-blur)))) {
336
- .cb-surface--glass { background: var(--cb-glass-bg-opaque); }
370
+ .cb-surface--glass { background: var(--cb-glass-opaque-fill); }
337
371
  }
338
372
 
339
373
  @media (prefers-reduced-transparency: reduce) {
340
374
  .cb-surface--glass {
341
- background: var(--cb-glass-bg-opaque);
375
+ background: var(--cb-glass-opaque-fill);
342
376
  backdrop-filter: none;
343
377
  -webkit-backdrop-filter: none;
344
378
  }
@@ -346,7 +380,7 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
346
380
 
347
381
  @media (prefers-contrast: more) {
348
382
  .cb-surface--glass {
349
- background: var(--cb-glass-bg-opaque);
383
+ background: var(--cb-glass-opaque-fill);
350
384
  border-color: var(--cb-glass-border-strong);
351
385
  backdrop-filter: none;
352
386
  -webkit-backdrop-filter: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ceebee/ui",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "Ceebee's design system: tokens, themed primitives, motion, and onboarding.",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -34,10 +34,6 @@
34
34
  "./styles.css": "./dist/styles.css",
35
35
  "./skins/*.css": "./dist/skins/*.css"
36
36
  },
37
- "scripts": {
38
- "build": "tsup && node ./stamp-client.mjs && node ./build-css.mjs",
39
- "lint": "tsc -p tsconfig.json --noEmit"
40
- },
41
37
  "peerDependencies": {
42
38
  "@base-ui/react": "^1.7.0",
43
39
  "lucide-react": ">=0.400.0",
@@ -46,14 +42,6 @@
46
42
  "react-dom": ">=19",
47
43
  "embla-carousel-react": "^8.6.0"
48
44
  },
49
- "peerDependenciesMeta": {
50
- "lucide-react": {
51
- "optional": true
52
- },
53
- "embla-carousel-react": {
54
- "optional": true
55
- }
56
- },
57
45
  "devDependencies": {
58
46
  "@base-ui/react": "^1.7.0",
59
47
  "@types/react": "^19.0.0",
@@ -64,5 +52,9 @@
64
52
  "tsup": "^8.3.5",
65
53
  "typescript": "^5.7.2",
66
54
  "embla-carousel-react": "^8.6.0"
55
+ },
56
+ "scripts": {
57
+ "build": "tsup && node ./stamp-client.mjs && node ./build-css.mjs",
58
+ "lint": "tsc -p tsconfig.json --noEmit"
67
59
  }
68
- }
60
+ }