@floegence/floe-webapp-core 0.52.9 → 0.52.11

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 (13) hide show
  1. package/dist/components/ui/Button.js +24 -24
  2. package/dist/components/ui/Card.js +3 -3
  3. package/dist/components/ui/Tooltip.js +2 -2
  4. package/dist/components/ui/dialogSurfaceScope.d.ts +1 -0
  5. package/dist/components/ui/dialogSurfaceScope.js +1 -1
  6. package/dist/context/FloeConfigContext.d.ts +1 -1
  7. package/dist/context/FloeConfigContext.js +1 -1
  8. package/dist/floe.css +13 -1
  9. package/dist/styles/tokens.d.ts +30 -6
  10. package/dist/styles/tokens.js +16 -4
  11. package/dist/styles.css +1 -1
  12. package/dist/surface.css +3 -3
  13. package/package.json +1 -1
package/dist/components/ui/Button.js CHANGED
@@ -1,17 +1,17 @@
1
- import { spread as c, mergeProps as d, insert as n, createComponent as t, memo as l, Dynamic as u, template as g } from "solid-js/web";
2
- import { splitProps as m, Show as h } from "solid-js";
1
+ import { spread as d, mergeProps as c, insert as n, createComponent as t, memo as g, Dynamic as u, template as l } from "solid-js/web";
2
+ import { splitProps as m, Show as b } from "solid-js";
3
3
  import { cn as a } from "../../utils/cn.js";
4
4
  import { Loader2 as p } from "../icons/index.js";
5
- var v = /* @__PURE__ */ g("<button type=button data-floe-surface-part=action>");
6
- const f = {
7
- default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:scale-[0.98]",
8
- primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:scale-[0.98]",
9
- secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 active:scale-[0.98]",
10
- outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground active:scale-[0.98]",
11
- ghost: "hover:bg-accent hover:text-accent-foreground active:scale-[0.98]",
12
- "ghost-destructive": "bg-transparent text-muted-foreground hover:bg-error hover:text-error-foreground active:scale-[0.98]",
13
- destructive: "bg-error text-error-foreground shadow-sm hover:bg-error/90 active:scale-[0.98]"
14
- }, b = {
5
+ var h = /* @__PURE__ */ l("<button type=button data-floe-surface-part=action>");
6
+ const v = {
7
+ default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-primary/80",
8
+ primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-primary/80",
9
+ secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 active:bg-secondary/70",
10
+ outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground active:bg-accent/80",
11
+ ghost: "hover:bg-accent hover:text-accent-foreground active:bg-accent/80",
12
+ "ghost-destructive": "bg-transparent text-muted-foreground hover:bg-error hover:text-error-foreground active:bg-error/80",
13
+ destructive: "bg-error text-error-foreground shadow-sm hover:bg-error/90 active:bg-error/80"
14
+ }, f = {
15
15
  xs: "h-6 px-2 text-[11px] rounded",
16
16
  sm: "h-7 px-2.5 text-xs rounded",
17
17
  md: "h-8 px-3 text-xs rounded-md",
@@ -24,28 +24,28 @@ const f = {
24
24
  lg: "w-4 h-4",
25
25
  icon: "w-4 h-4"
26
26
  };
27
- function k(s) {
28
- const [e, i] = m(s, ["variant", "size", "loading", "icon", "class", "children", "disabled"]), o = () => x[e.size ?? "md"];
27
+ function k(i) {
28
+ const [r, s] = m(i, ["variant", "size", "loading", "icon", "class", "children", "disabled"]), o = () => x[r.size ?? "md"];
29
29
  return (() => {
30
- var r = v();
31
- return c(r, d({
30
+ var e = h();
31
+ return d(e, c({
32
32
  get "data-floe-surface"() {
33
- return e.variant === "ghost" || e.variant === "ghost-destructive" ? void 0 : "raised";
33
+ return r.variant === "ghost" || r.variant === "ghost-destructive" ? void 0 : "raised";
34
34
  },
35
35
  get class() {
36
- return a("inline-flex items-center justify-center gap-1.5 font-medium cursor-pointer", "transition-colors duration-150", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed", f[e.variant ?? "default"], b[e.size ?? "md"], e.class);
36
+ return a("inline-flex items-center justify-center gap-1.5 font-medium cursor-pointer", "transition-[color,background-color,border-color,box-shadow] duration-120", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed", v[r.variant ?? "default"], f[r.size ?? "md"], r.class);
37
37
  },
38
38
  get disabled() {
39
- return e.disabled || e.loading;
39
+ return r.disabled || r.loading;
40
40
  }
41
- }, i), !1, !0), n(r, t(h, {
41
+ }, s), !1, !0), n(e, t(b, {
42
42
  get when() {
43
- return e.loading;
43
+ return r.loading;
44
44
  },
45
45
  get fallback() {
46
- return l(() => !!e.icon)() && t(u, {
46
+ return g(() => !!r.icon)() && t(u, {
47
47
  get component() {
48
- return e.icon;
48
+ return r.icon;
49
49
  },
50
50
  get class() {
51
51
  return o();
@@ -59,7 +59,7 @@ function k(s) {
59
59
  }
60
60
  });
61
61
  }
62
- }), null), n(r, () => e.children, null), r;
62
+ }), null), n(e, () => r.children, null), e;
63
63
  })();
64
64
  }
65
65
  export {
package/dist/components/ui/Card.js CHANGED
@@ -37,9 +37,9 @@ function oe(l) {
37
37
  B(() => {
38
38
  s !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(s), s = null);
39
39
  });
40
- const k = "rounded-lg duration-300 ease-out", P = () => e.enableTilt || r() === "hover-lift" ? "transition-[color,background-color,border-color,box-shadow,transform]" : "transition-[color,background-color,border-color,box-shadow]", j = {
41
- default: "bg-card border border-border shadow-sm hover:shadow-md",
42
- "hover-lift": "bg-card border border-border shadow-sm hover:shadow-xl hover:-translate-y-1",
40
+ const k = "rounded-lg duration-180 ease-out", P = () => e.enableTilt || r() === "hover-lift" ? "transition-[color,background-color,border-color,box-shadow,transform]" : "transition-[color,background-color,border-color,box-shadow]", j = {
41
+ default: "bg-card border border-border shadow-sm hover:shadow-sm",
42
+ "hover-lift": "bg-card border border-border shadow-sm hover:shadow-md hover:-translate-y-0.5",
43
43
  "gradient-border": "relative bg-card overflow-hidden",
44
44
  glass: "backdrop-blur-xl bg-card/30 border border-border/50 shadow-lg",
45
45
  spotlight: "relative bg-card border border-border overflow-hidden",
package/dist/components/ui/Tooltip.js CHANGED
@@ -42,8 +42,8 @@ function N(o) {
42
42
  get children() {
43
43
  var l = k(), f = l.firstChild;
44
44
  return i(l, () => o.content, f), $((r) => {
45
- var u = g("absolute z-50 px-2 py-1", "bg-popover text-popover-foreground text-xs rounded shadow-md", "whitespace-nowrap", "floe-floating-presence floe-floating-tooltip", y[o.placement ?? "top"], o.class), c = n.state(), p = n.exiting() ? "true" : void 0, m = g("absolute w-0 h-0 border-4", w[o.placement ?? "top"]);
46
- return u !== r.e && v(l, r.e = u), c !== r.t && b(l, "data-floating-presence", r.t = c), p !== r.a && b(l, "aria-hidden", r.a = p), m !== r.o && v(f, r.o = m), r;
45
+ var u = g("absolute z-50 px-2 py-1", "bg-popover text-popover-foreground text-[11px] rounded-md shadow-md", "whitespace-nowrap", "floe-floating-presence floe-floating-tooltip", y[o.placement ?? "top"], o.class), p = n.state(), c = n.exiting() ? "true" : void 0, m = g("absolute w-0 h-0 border-4", w[o.placement ?? "top"]);
46
+ return u !== r.e && v(l, r.e = u), p !== r.t && b(l, "data-floating-presence", r.t = p), c !== r.a && b(l, "aria-hidden", r.a = c), m !== r.o && v(f, r.o = m), r;
47
47
  }, {
48
48
  e: void 0,
49
49
  t: void 0,
package/dist/components/ui/dialogSurfaceScope.d.ts CHANGED
@@ -21,6 +21,7 @@ export type ResolvedSurfacePortalHost = ResolvedDialogSurfaceHost;
21
21
  export type SurfacePortalBoundaryRect = SurfacePortalRect;
22
22
  export type { SurfacePortalRect };
23
23
  export type SurfacePortalHostResolutionOptions = Readonly<{
24
+ /** A supplied owner fixes scope, including when it belongs to the global surface. */
24
25
  owner?: Element | null;
25
26
  }>;
26
27
  export declare function ensureDialogSurfaceInteractionTracking(): void;
package/dist/components/ui/dialogSurfaceScope.js CHANGED
@@ -44,7 +44,7 @@ function v(t) {
44
44
  }
45
45
  function C(t = {}) {
46
46
  p();
47
- const e = A(), n = l(t.owner ?? null) ?? l(e?.target ?? null) ?? l(e?.activeElement ?? null);
47
+ const e = A(), n = t.owner ? l(t.owner) : l(e?.target ?? null) ?? l(e?.activeElement ?? null);
48
48
  return n ? {
49
49
  host: n,
50
50
  boundaryHost: n,
package/dist/context/FloeConfigContext.d.ts CHANGED
@@ -73,7 +73,7 @@ export interface FloeLayoutConfig {
73
73
  export interface FloeThemeConfig {
74
74
  storageKey: string;
75
75
  defaultTheme: ThemeType;
76
- /** Surface material, independent of color palettes. Defaults to standard. */
76
+ /** Surface material, independent of color palettes. Defaults to soft-neumorphic. */
77
77
  defaultSurfaceStyle?: FloeSurfaceStyle;
78
78
  /** Defaults to `${storageKey}-surface-style`; uses the configured persistence service. */
79
79
  surfaceStyleStorageKey?: string;
package/dist/context/FloeConfigContext.js CHANGED
@@ -45,7 +45,7 @@ const m = {
45
45
  theme: {
46
46
  storageKey: "theme",
47
47
  defaultTheme: "system",
48
- defaultSurfaceStyle: "standard"
48
+ defaultSurfaceStyle: "soft-neumorphic"
49
49
  },
50
50
  accessibility: {
51
51
  mainContentId: "floe-main-content",
package/dist/floe.css CHANGED
@@ -23,6 +23,18 @@
23
23
  --radius: 0.375rem;
24
24
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
25
25
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace;
26
+ --floe-type-caption: 0.6875rem;
27
+ --floe-type-control: 0.8125rem;
28
+ --floe-type-body: 0.875rem;
29
+ --floe-type-heading: 1rem;
30
+ --floe-space-1: 0.25rem;
31
+ --floe-space-2: 0.5rem;
32
+ --floe-space-3: 0.75rem;
33
+ --floe-space-4: 1rem;
34
+ --floe-space-6: 1.5rem;
35
+ --floe-radius-control: 0.375rem;
36
+ --floe-radius-group: 0.5rem;
37
+ --floe-radius-floating: 0.625rem;
26
38
  }
27
39
 
28
40
  /*
@@ -360,7 +372,7 @@
360
372
  [data-floe-floating-window-surface='true'].floe-floating-window-motion {
361
373
  /* Floating windows use an opaque Mica-like stack in every surface mode.
362
374
  * Keeping this on the component boundary makes the default (standard)
363
- * path match the opt-in material without changing other controls. */
375
+ * path match the selected material without changing other controls. */
364
376
  background-color: var(--card);
365
377
  border-color: color-mix(in srgb, var(--border) 78%, var(--background) 22%);
366
378
  border-radius: 10px;
package/dist/styles/tokens.d.ts CHANGED
@@ -47,6 +47,18 @@ export declare const floeSharedCssVariables: {
47
47
  readonly '--radius': "0.375rem";
48
48
  readonly '--font-sans': "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
49
49
  readonly '--font-mono': "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace";
50
+ readonly '--floe-type-caption': "0.6875rem";
51
+ readonly '--floe-type-control': "0.8125rem";
52
+ readonly '--floe-type-body': "0.875rem";
53
+ readonly '--floe-type-heading': "1rem";
54
+ readonly '--floe-space-1': "0.25rem";
55
+ readonly '--floe-space-2': "0.5rem";
56
+ readonly '--floe-space-3': "0.75rem";
57
+ readonly '--floe-space-4': "1rem";
58
+ readonly '--floe-space-6': "1.5rem";
59
+ readonly '--floe-radius-control': "0.375rem";
60
+ readonly '--floe-radius-group': "0.5rem";
61
+ readonly '--floe-radius-floating': "0.625rem";
50
62
  };
51
63
  export declare const floeColorTokenCategories: readonly [{
52
64
  readonly name: "Base Colors";
@@ -642,15 +654,15 @@ export declare function getFloeColorTokenValue(variable: FloeCssVariableName, th
642
654
  export declare const floeSurfaceTokens: readonly [{
643
655
  readonly variable: "--floe-surface-shadow-raised";
644
656
  readonly role: "raised";
645
- readonly fallback: "0 2px 5px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
657
+ readonly fallback: "0 1px 3px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
646
658
  }, {
647
659
  readonly variable: "--floe-surface-shadow-inset";
648
660
  readonly role: "inset";
649
- readonly fallback: "inset 0 1px 2px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)";
661
+ readonly fallback: "inset 0 1px 1px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)";
650
662
  }, {
651
663
  readonly variable: "--floe-surface-shadow-floating";
652
664
  readonly role: "floating";
653
- readonly fallback: "0 8px 20px -6px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
665
+ readonly fallback: "0 8px 18px -8px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
654
666
  }, {
655
667
  readonly variable: "--floe-surface-shadow-interacting";
656
668
  readonly role: "interacting";
@@ -1245,19 +1257,31 @@ export declare const floeDesignTokens: {
1245
1257
  readonly '--radius': "0.375rem";
1246
1258
  readonly '--font-sans': "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
1247
1259
  readonly '--font-mono': "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace";
1260
+ readonly '--floe-type-caption': "0.6875rem";
1261
+ readonly '--floe-type-control': "0.8125rem";
1262
+ readonly '--floe-type-body': "0.875rem";
1263
+ readonly '--floe-type-heading': "1rem";
1264
+ readonly '--floe-space-1': "0.25rem";
1265
+ readonly '--floe-space-2': "0.5rem";
1266
+ readonly '--floe-space-3': "0.75rem";
1267
+ readonly '--floe-space-4': "1rem";
1268
+ readonly '--floe-space-6': "1.5rem";
1269
+ readonly '--floe-radius-control': "0.375rem";
1270
+ readonly '--floe-radius-group': "0.5rem";
1271
+ readonly '--floe-radius-floating': "0.625rem";
1248
1272
  };
1249
1273
  readonly surface: readonly [{
1250
1274
  readonly variable: "--floe-surface-shadow-raised";
1251
1275
  readonly role: "raised";
1252
- readonly fallback: "0 2px 5px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
1276
+ readonly fallback: "0 1px 3px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
1253
1277
  }, {
1254
1278
  readonly variable: "--floe-surface-shadow-inset";
1255
1279
  readonly role: "inset";
1256
- readonly fallback: "inset 0 1px 2px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)";
1280
+ readonly fallback: "inset 0 1px 1px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)";
1257
1281
  }, {
1258
1282
  readonly variable: "--floe-surface-shadow-floating";
1259
1283
  readonly role: "floating";
1260
- readonly fallback: "0 8px 20px -6px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
1284
+ readonly fallback: "0 8px 18px -8px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)";
1261
1285
  }, {
1262
1286
  readonly variable: "--floe-surface-shadow-interacting";
1263
1287
  readonly role: "interacting";
package/dist/styles/tokens.js CHANGED
@@ -1,7 +1,19 @@
1
1
  const r = {
2
2
  "--radius": "0.375rem",
3
3
  "--font-sans": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
4
- "--font-mono": "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace"
4
+ "--font-mono": "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace",
5
+ "--floe-type-caption": "0.6875rem",
6
+ "--floe-type-control": "0.8125rem",
7
+ "--floe-type-body": "0.875rem",
8
+ "--floe-type-heading": "1rem",
9
+ "--floe-space-1": "0.25rem",
10
+ "--floe-space-2": "0.5rem",
11
+ "--floe-space-3": "0.75rem",
12
+ "--floe-space-4": "1rem",
13
+ "--floe-space-6": "1.5rem",
14
+ "--floe-radius-control": "0.375rem",
15
+ "--floe-radius-group": "0.5rem",
16
+ "--floe-radius-floating": "0.625rem"
5
17
  }, l = [
6
18
  {
7
19
  name: "Base Colors",
@@ -632,9 +644,9 @@ function g(a, e) {
632
644
  return u[e][a];
633
645
  }
634
646
  const h = [
635
- { variable: "--floe-surface-shadow-raised", role: "raised", fallback: "0 2px 5px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)" },
636
- { variable: "--floe-surface-shadow-inset", role: "inset", fallback: "inset 0 1px 2px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)" },
637
- { variable: "--floe-surface-shadow-floating", role: "floating", fallback: "0 8px 20px -6px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)" },
647
+ { variable: "--floe-surface-shadow-raised", role: "raised", fallback: "0 1px 3px -2px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)" },
648
+ { variable: "--floe-surface-shadow-inset", role: "inset", fallback: "inset 0 1px 1px var(--floe-surface-shade), inset 0 -1px 1px var(--floe-surface-highlight)" },
649
+ { variable: "--floe-surface-shadow-floating", role: "floating", fallback: "0 8px 18px -8px var(--floe-surface-shade), inset 0 1px 1px var(--floe-surface-highlight)" },
638
650
  { variable: "--floe-surface-shadow-interacting", role: "interacting", fallback: "0 1px 2px var(--floe-surface-shade)" }
639
651
  ], m = {
640
652
  colors: l,