@tanishqkancharla/maui 0.0.56 → 0.0.58

package/dist/UIDatabase/Focus.d.ts

@@ -20,14 +20,14 @@ export type UIFocusSchema = {
     value: FocusTreeKey | undefined;
 };
 export declare const focusActions: {
-    registerFocusElement: (dbOrTx: import("tuple-database").TupleTransactionApi<UIFocusSchema> | import("tuple-database").TupleDatabaseClientApi<UIFocusSchema>, elementKey: FocusTreeKey) => void;
-    unregisterFocusElement: (dbOrTx: import("tuple-database").TupleTransactionApi<UIFocusSchema> | import("tuple-database").TupleDatabaseClientApi<UIFocusSchema>, elementKey: FocusTreeKey) => void;
-    registerFocusScope: (dbOrTx: import("tuple-database").TupleTransactionApi<UIFocusSchema> | import("tuple-database").TupleDatabaseClientApi<UIFocusSchema>, scopeKey: FocusTreeKey, scopeProps: FocusScopeProps) => void;
-    unregisterFocusScope: (dbOrTx: import("tuple-database").TupleTransactionApi<UIFocusSchema> | import("tuple-database").TupleDatabaseClientApi<UIFocusSchema>, scopeKey: FocusTreeKey) => void;
-    focus: (dbOrTx: import("tuple-database").TupleTransactionApi<UIFocusSchema> | import("tuple-database").TupleDatabaseClientApi<UIFocusSchema>, key: FocusTreeKey) => void;
-    blur: (dbOrTx: import("tuple-database").TupleTransactionApi<UIFocusSchema> | import("tuple-database").TupleDatabaseClientApi<UIFocusSchema>, key: FocusTreeKey) => void;
-    moveToNextFocus: (dbOrTx: import("tuple-database").TupleTransactionApi<UIFocusSchema> | import("tuple-database").TupleDatabaseClientApi<UIFocusSchema>) => void;
-    moveToPreviousFocus: (dbOrTx: import("tuple-database").TupleTransactionApi<UIFocusSchema> | import("tuple-database").TupleDatabaseClientApi<UIFocusSchema>) => void;
+    registerFocusElement: (dbOrTx: import("tuple-database").TupleDatabaseClientApi<UIFocusSchema> | import("tuple-database").TupleTransactionApi<UIFocusSchema>, elementKey: FocusTreeKey) => void;
+    unregisterFocusElement: (dbOrTx: import("tuple-database").TupleDatabaseClientApi<UIFocusSchema> | import("tuple-database").TupleTransactionApi<UIFocusSchema>, elementKey: FocusTreeKey) => void;
+    registerFocusScope: (dbOrTx: import("tuple-database").TupleDatabaseClientApi<UIFocusSchema> | import("tuple-database").TupleTransactionApi<UIFocusSchema>, scopeKey: FocusTreeKey, scopeProps: FocusScopeProps) => void;
+    unregisterFocusScope: (dbOrTx: import("tuple-database").TupleDatabaseClientApi<UIFocusSchema> | import("tuple-database").TupleTransactionApi<UIFocusSchema>, scopeKey: FocusTreeKey) => void;
+    focus: (dbOrTx: import("tuple-database").TupleDatabaseClientApi<UIFocusSchema> | import("tuple-database").TupleTransactionApi<UIFocusSchema>, key: FocusTreeKey) => void;
+    blur: (dbOrTx: import("tuple-database").TupleDatabaseClientApi<UIFocusSchema> | import("tuple-database").TupleTransactionApi<UIFocusSchema>, key: FocusTreeKey) => void;
+    moveToNextFocus: (dbOrTx: import("tuple-database").TupleDatabaseClientApi<UIFocusSchema> | import("tuple-database").TupleTransactionApi<UIFocusSchema>) => void;
+    moveToPreviousFocus: (dbOrTx: import("tuple-database").TupleDatabaseClientApi<UIFocusSchema> | import("tuple-database").TupleTransactionApi<UIFocusSchema>) => void;
 };
 type FocusElementAndKey = {
     key: ["focusTree", ...string[]];

package/dist/UIDatabase/UIDatabase.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { ReadOnlyTupleDatabaseClientApi, TupleDatabaseClientApi } from "tuple-database";
 import { UIFocusSchema } from "./Focus";
 export type UIDatabaseSchema = UIFocusSchema;
-export declare const uiQuery: <I extends any[], O>(fn: (tx: import("tuple-database").TupleTransactionApi<UIFocusSchema>, ...args: I) => O) => (dbOrTx: import("tuple-database").TupleTransactionApi<UIFocusSchema> | TupleDatabaseClientApi<UIFocusSchema>, ...args: I) => O;
+export declare const uiQuery: <I extends any[], O>(fn: (tx: import("tuple-database").TupleTransactionApi<UIFocusSchema>, ...args: I) => O) => (dbOrTx: TupleDatabaseClientApi<UIFocusSchema> | import("tuple-database").TupleTransactionApi<UIFocusSchema>, ...args: I) => O;
 export type UIDatabase = TupleDatabaseClientApi<UIDatabaseSchema>;
 export type ReadOnlyUIDatabase = ReadOnlyTupleDatabaseClientApi<UIDatabaseSchema>;
 export declare function UIDatabaseProvider(props: {

package/dist/components/Button.js

@@ -20,6 +20,7 @@ const disabledRaised = {
     opacity: 1,
     color: colors.gray[8],
     backgroundColor: backgroundColor.element,
+    backgroundImage: "none",
     boxShadow: buttonShadow,
 };
 const disabledQuiet = {
@@ -141,40 +142,48 @@ function darkerFill(color) {
 function onSolidText(color) {
     return `oklch(from ${color} clamp(0.2, (0.75 - l) * 100, 0.99) 0 0)`;
 }
+/** Darker shade of a fill (OKLCH lightness offset) at an alpha. */
+function fillShade(color, lightnessOffset, alpha = 1) {
+    return `oklch(from ${color} calc(l - ${lightnessOffset}) c h / ${alpha})`;
+}
+/** Fill-tinted edge and lift; no neutral gray, so the shadow matches any fill. */
 function primaryButtonShadow(color) {
-    return `inset 0 1px #ffffff18, inset 0 0 1px .5px #fff2, 0 1px .5px #0003, 0 0 3px -1px color-mix(in oklch, ${color}, black 35%)`;
+    return `inset 0 1px #ffffff18, inset 0 0 1px .5px #fff2, 0 0 0 .5px ${fillShade(color, 0.1)}, 0 1px 2px ${fillShade(color, 0, 0.35)}, 0 3px 8px -3px ${fillShade(color, 0, 0.6)}`;
 }
+/**
+ * Diagonal from a slightly darker, more saturated, warmer-rotated fill to the
+ * fill. The offsets are the OKLCH delta between Campsite's #FB432C → #FF591E.
+ */
+function primaryButtonGradient(color) {
+    return `linear-gradient(to top left, oklch(from ${color} calc(l - 0.027) calc(c * 1.05) calc(h - 6.8)), ${color})`;
+}
+/** Hover lightens the top of the gradient instead of replacing the fill. */
+const primaryHoverSheen = `linear-gradient(to bottom, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0))`;
+const primaryClass = memoize((fill, textColor) => {
+    const primaryShadow = primaryButtonShadow(fill);
+    const gradient = primaryButtonGradient(fill);
+    return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
+        color: textColor,
+        backgroundColor: fill,
+        backgroundImage: gradient,
+        boxShadow: primaryShadow,
+        "&:hover:not(:disabled)": {
+            backgroundImage: `${primaryHoverSheen}, ${gradient}`,
+        },
+        "&:disabled": disabledRaised,
+    });
+});
 const coloredButtonClass = memoize((variant, color) => {
     if (isCssColor(color)) {
         const fill = opaqueColor(color);
         if (variant === "primary") {
-            const hover = surfaceWash(colors.gray[12], surfaceMixPercent.hover, fill);
-            const primaryShadow = primaryButtonShadow(fill);
-            return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
-                color: onSolidText(fill),
-                backgroundColor: fill,
-                boxShadow: primaryShadow,
-                "&:hover:not(:disabled)": {
-                    backgroundColor: hover,
-                },
-                "&:disabled": disabledRaised,
-            });
+            return primaryClass(fill, onSolidText(fill));
         }
         return quietClass(fill, darkerFill(fill), fill);
     }
     const scale = paletteFill(color);
     if (variant === "primary") {
-        const primaryShadow = primaryButtonShadow(scale[9]);
-        const hover = surfaceWash(colors.gray[12], surfaceMixPercent.hover, scale[9]);
-        return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
-            color: darkTextOnSolid.has(color) ? scale[12] : "white",
-            backgroundColor: scale[9],
-            boxShadow: primaryShadow,
-            "&:hover:not(:disabled)": {
-                backgroundColor: hover,
-            },
-            "&:disabled": disabledRaised,
-        });
+        return primaryClass(scale[9], darkTextOnSolid.has(color) ? scale[12] : "white");
     }
     return quietClass(scale[11], scale[12], paletteAlpha(color)[9]);
 });

package/dist/components/FuzzyString.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { colors } from "../tokens/colors";
 export function FuzzyString(props) {
     const { match } = props;

package/dist/components/Input.d.ts

@@ -17,7 +17,7 @@ export type SearchFieldProps = AriaSearchFieldProps & KeyboardHintProps & {
 /** `root` on the field wrapper; `input` on RAC `Input` (`:hover`, `:disabled`, `aria-invalid`, `:focus-visible`, `::placeholder`); `frame` wraps the input when a keyboard hint is shown; `keyboardHint` on a Maui `Kbd variant="quiet"` inside `frame`; `error` on RAC `FieldError`. */
 export declare const textFieldStyles: {
     readonly root: import("purse-styles").StyleElement;
-    readonly input: (args_0?: Pick<TextFieldProps, "size" | "keyboardHint"> | undefined) => import("purse-styles").StyleElement;
+    readonly input: (args_0?: Pick<TextFieldProps, "keyboardHint" | "size"> | undefined) => import("purse-styles").StyleElement;
     readonly frame: import("purse-styles").StyleElement;
     readonly keyboardHint: import("purse-styles").StyleElement;
     readonly error: import("purse-styles").StyleElement;

package/dist/components/MermaidDiagram.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { renderMermaidSVG } from "beautiful-mermaid";
 import { useMemo, useState } from "react";
 import { style, useStyles } from "purse-styles";

package/dist/components/Slider.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Label as RACLabel, Slider as RACSlider, SliderOutput, SliderThumb, SliderTrack, } from "react-aria-components";
 import { defineVars, style, useStyles } from "purse-styles";
 import { LARGE_SCALE } from "../theme/dataScale";

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import { mergeProps, mergeRefs, useOverlayPosition, useTooltip, useTooltipTrigger, } from "react-aria";

package/dist/theme/dataTheme.d.ts

@@ -1,2 +1,2 @@
 /** Selector condition for `defineVars` dark theme values. */
-export declare const DARK_THEME: ":root[data-theme=\"dark\"]";
+export declare const DARK_THEME: ':root[data-theme="dark"]';

package/dist/tokens/background.d.ts

@@ -13,10 +13,10 @@ type MixPercent = number | {
 /** `color-mix` of a foreground into `base` (transparent by default). */
 export declare function surfaceWash(foreground: string, percent: MixPercent, base?: string): string;
 export declare const backgroundColor: {
+    app: `var(--${string})`;
+    element: `var(--${string})`;
     elementHover: `var(--${string})`;
     elementActive: `var(--${string})`;
-    element: `var(--${string})`;
-    app: `var(--${string})`;
 };
 export declare const background: {
     app: import("purse-styles").StyleElement;

package/dist/tokens/colors.d.ts

@@ -8,68 +8,6 @@ export type PaletteName = (typeof paletteNames)[number];
 export declare const colorNames: readonly ["accent", "gray", "mauve", "slate", "sage", "olive", "sand", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "bronze", "gold", "brown", "orange", "amber", "yellow", "lime", "mint", "sky"];
 export type ColorName = (typeof colorNames)[number];
 export declare const colors: {
-    grayAlpha: ColorScale;
-    mauveAlpha: ColorScale;
-    slateAlpha: ColorScale;
-    sageAlpha: ColorScale;
-    oliveAlpha: ColorScale;
-    sandAlpha: ColorScale;
-    tomatoAlpha: ColorScale;
-    redAlpha: ColorScale;
-    rubyAlpha: ColorScale;
-    crimsonAlpha: ColorScale;
-    pinkAlpha: ColorScale;
-    plumAlpha: ColorScale;
-    purpleAlpha: ColorScale;
-    violetAlpha: ColorScale;
-    irisAlpha: ColorScale;
-    indigoAlpha: ColorScale;
-    blueAlpha: ColorScale;
-    cyanAlpha: ColorScale;
-    tealAlpha: ColorScale;
-    jadeAlpha: ColorScale;
-    greenAlpha: ColorScale;
-    grassAlpha: ColorScale;
-    bronzeAlpha: ColorScale;
-    goldAlpha: ColorScale;
-    brownAlpha: ColorScale;
-    orangeAlpha: ColorScale;
-    amberAlpha: ColorScale;
-    yellowAlpha: ColorScale;
-    limeAlpha: ColorScale;
-    mintAlpha: ColorScale;
-    skyAlpha: ColorScale;
-    gray: ColorScale;
-    mauve: ColorScale;
-    slate: ColorScale;
-    sage: ColorScale;
-    olive: ColorScale;
-    sand: ColorScale;
-    tomato: ColorScale;
-    red: ColorScale;
-    ruby: ColorScale;
-    crimson: ColorScale;
-    pink: ColorScale;
-    plum: ColorScale;
-    purple: ColorScale;
-    violet: ColorScale;
-    iris: ColorScale;
-    indigo: ColorScale;
-    blue: ColorScale;
-    cyan: ColorScale;
-    teal: ColorScale;
-    jade: ColorScale;
-    green: ColorScale;
-    grass: ColorScale;
-    bronze: ColorScale;
-    gold: ColorScale;
-    brown: ColorScale;
-    orange: ColorScale;
-    amber: ColorScale;
-    yellow: ColorScale;
-    lime: ColorScale;
-    mint: ColorScale;
-    sky: ColorScale;
     accent: import("purse-styles").VariableGroup<{
         readonly 1: {
             readonly default: string;
@@ -170,6 +108,68 @@ export declare const colors: {
             readonly ":root[data-theme=\"dark\"]": string;
         };
     }>;
+    amber: ColorScale;
+    amberAlpha: ColorScale;
+    blue: ColorScale;
+    blueAlpha: ColorScale;
+    bronze: ColorScale;
+    bronzeAlpha: ColorScale;
+    brown: ColorScale;
+    brownAlpha: ColorScale;
+    crimson: ColorScale;
+    crimsonAlpha: ColorScale;
+    cyan: ColorScale;
+    cyanAlpha: ColorScale;
+    gold: ColorScale;
+    goldAlpha: ColorScale;
+    grass: ColorScale;
+    grassAlpha: ColorScale;
+    gray: ColorScale;
+    grayAlpha: ColorScale;
+    green: ColorScale;
+    greenAlpha: ColorScale;
+    indigo: ColorScale;
+    indigoAlpha: ColorScale;
+    iris: ColorScale;
+    irisAlpha: ColorScale;
+    jade: ColorScale;
+    jadeAlpha: ColorScale;
+    lime: ColorScale;
+    limeAlpha: ColorScale;
+    mauve: ColorScale;
+    mauveAlpha: ColorScale;
+    mint: ColorScale;
+    mintAlpha: ColorScale;
+    olive: ColorScale;
+    oliveAlpha: ColorScale;
+    orange: ColorScale;
+    orangeAlpha: ColorScale;
+    pink: ColorScale;
+    pinkAlpha: ColorScale;
+    plum: ColorScale;
+    plumAlpha: ColorScale;
+    purple: ColorScale;
+    purpleAlpha: ColorScale;
+    red: ColorScale;
+    redAlpha: ColorScale;
+    ruby: ColorScale;
+    rubyAlpha: ColorScale;
+    sage: ColorScale;
+    sageAlpha: ColorScale;
+    sand: ColorScale;
+    sandAlpha: ColorScale;
+    sky: ColorScale;
+    skyAlpha: ColorScale;
+    slate: ColorScale;
+    slateAlpha: ColorScale;
+    teal: ColorScale;
+    tealAlpha: ColorScale;
+    tomato: ColorScale;
+    tomatoAlpha: ColorScale;
+    violet: ColorScale;
+    violetAlpha: ColorScale;
+    yellow: ColorScale;
+    yellowAlpha: ColorScale;
 };
 export declare const scaleSteps: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 export {};

package/dist/tokens/text.d.ts

@@ -11,16 +11,11 @@ export declare const monoFontFamily = "\"Commit Mono\", ui-monospace, SFMono-Reg
 export declare const monoFontStyle: {
     readonly fontFamily: "\"Commit Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace";
     readonly fontVariantNumeric: "tabular-nums";
-    readonly fontFeatureSettings: "\"ss05\" 1";
+    readonly fontFeatureSettings: '"ss05" 1';
     readonly tabSize: "2";
     readonly MozTabSize: "2";
 };
 export declare const baseTextStyle: {
-    fontWeight: 400;
-    color: string;
-    filter?: import("csstype").Property.Filter | undefined;
-    fill?: import("csstype").Property.Fill | undefined;
-    scale?: import("csstype").Property.Scale | undefined;
     accentColor?: import("csstype").Property.AccentColor | undefined;
     alignContent?: import("csstype").Property.AlignContent | undefined;
     alignItems?: import("csstype").Property.AlignItems | undefined;
@@ -141,8 +136,10 @@ export declare const baseTextStyle: {
     dominantBaseline?: import("csstype").Property.DominantBaseline | undefined;
     emptyCells?: import("csstype").Property.EmptyCells | undefined;
     fieldSizing?: import("csstype").Property.FieldSizing | undefined;
+    fill?: import("csstype").Property.Fill | undefined;
     fillOpacity?: import("csstype").Property.FillOpacity | undefined;
     fillRule?: import("csstype").Property.FillRule | undefined;
+    filter?: import("csstype").Property.Filter | undefined;
     flexBasis?: import("csstype").Property.FlexBasis<string | number> | undefined;
     flexDirection?: import("csstype").Property.FlexDirection | undefined;
     flexGrow?: import("csstype").Property.FlexGrow | undefined;
@@ -323,6 +320,7 @@ export declare const baseTextStyle: {
     rubyPosition?: import("csstype").Property.RubyPosition | undefined;
     rx?: import("csstype").Property.Rx<string | number> | undefined;
     ry?: import("csstype").Property.Ry<string | number> | undefined;
+    scale?: import("csstype").Property.Scale | undefined;
     scrollBehavior?: import("csstype").Property.ScrollBehavior | undefined;
     scrollInitialTarget?: import("csstype").Property.ScrollInitialTarget | undefined;
     scrollMarginBlockEnd?: import("csstype").Property.ScrollMarginBlockEnd<string | number> | undefined;
@@ -437,7 +435,7 @@ export declare const baseTextStyle: {
     y?: import("csstype").Property.Y<string | number> | undefined;
     zIndex?: import("csstype").Property.ZIndex | undefined;
     zoom?: import("csstype").Property.Zoom | undefined;
-    all?: import("csstype").Globals | undefined;
+    all?: import("csstype").Property.All | undefined;
     animation?: import("csstype").Property.Animation<string & {}> | undefined;
     animationRange?: import("csstype").Property.AnimationRange<string | number> | undefined;
     background?: import("csstype").Property.Background<string | number> | undefined;
@@ -873,6 +871,8 @@ export declare const baseTextStyle: {
     colorInterpolation?: import("csstype").Property.ColorInterpolation | undefined;
     colorRendering?: import("csstype").Property.ColorRendering | undefined;
     glyphOrientationVertical?: import("csstype").Property.GlyphOrientationVertical | undefined;
+    fontWeight: 400;
+    color: string;
 };
 export declare const monospace: import("purse-styles").StyleElement;
 export type TextOptions = {

package/dist/utils/mauiShikiTheme.d.ts

@@ -41,43 +41,43 @@ export declare const mauiThemeTokens: {
     readonly dark: readonly [{
         readonly role: "Foreground";
         readonly sublime: "fgBase";
-        readonly color: "#eeeeee" | "#202020";
+        readonly color: "#202020" | "#eeeeee";
     }, {
         readonly role: "Comment";
         readonly sublime: "comment";
-        readonly color: "#6e6e6e" | "#646464";
+        readonly color: "#646464" | "#6e6e6e";
     }, {
         readonly role: "Keyword";
         readonly sublime: "keyword";
-        readonly color: "#8b8fd8" | "#3e63dd";
+        readonly color: "#3e63dd" | "#8b8fd8";
     }, {
         readonly role: "Operator";
         readonly sublime: "keyword.operator";
-        readonly color: "#d9a066" | "#a15c00";
+        readonly color: "#a15c00" | "#d9a066";
     }, {
         readonly role: "Type";
         readonly sublime: "entity.name.type";
-        readonly color: "#ecebe8" | "#272962";
+        readonly color: "#272962" | "#ecebe8";
     }, {
         readonly role: "Type reference";
         readonly sublime: "support.type";
-        readonly color: "#e8c9a0" | "#8a4b08";
+        readonly color: "#8a4b08" | "#e8c9a0";
     }, {
         readonly role: "Tag / component";
         readonly sublime: "entity.name.tag";
-        readonly color: "#baa7ff" | "#008573";
+        readonly color: "#008573" | "#baa7ff";
     }, {
         readonly role: "Attribute";
         readonly sublime: "entity.other.attribute-name";
-        readonly color: "#b4b4b4" | "#646464";
+        readonly color: "#646464" | "#b4b4b4";
     }, {
         readonly role: "String / constant";
         readonly sublime: "string, constant";
-        readonly color: "#3dd68c" | "#0d74ce";
+        readonly color: "#0d74ce" | "#3dd68c";
     }, {
         readonly role: "Function";
         readonly sublime: "entity.name.function";
-        readonly color: "#ecebe8" | "#202020";
+        readonly color: "#202020" | "#ecebe8";
     }, {
         readonly role: "Punctuation";
         readonly sublime: "punctuation";
@@ -85,48 +85,48 @@ export declare const mauiThemeTokens: {
     }, {
         readonly role: "Bracket / accent";
         readonly sublime: "brackets";
-        readonly color: "#a8a6f0" | "#3e63dd";
+        readonly color: "#3e63dd" | "#a8a6f0";
     }];
     readonly light: readonly [{
         readonly role: "Foreground";
         readonly sublime: "fgBase";
-        readonly color: "#eeeeee" | "#202020";
+        readonly color: "#202020" | "#eeeeee";
     }, {
         readonly role: "Comment";
         readonly sublime: "comment";
-        readonly color: "#6e6e6e" | "#646464";
+        readonly color: "#646464" | "#6e6e6e";
     }, {
         readonly role: "Keyword";
         readonly sublime: "keyword";
-        readonly color: "#8b8fd8" | "#3e63dd";
+        readonly color: "#3e63dd" | "#8b8fd8";
     }, {
         readonly role: "Operator";
         readonly sublime: "keyword.operator";
-        readonly color: "#d9a066" | "#a15c00";
+        readonly color: "#a15c00" | "#d9a066";
     }, {
         readonly role: "Type";
         readonly sublime: "entity.name.type";
-        readonly color: "#ecebe8" | "#272962";
+        readonly color: "#272962" | "#ecebe8";
     }, {
         readonly role: "Type reference";
         readonly sublime: "support.type";
-        readonly color: "#e8c9a0" | "#8a4b08";
+        readonly color: "#8a4b08" | "#e8c9a0";
     }, {
         readonly role: "Tag / component";
         readonly sublime: "entity.name.tag";
-        readonly color: "#baa7ff" | "#008573";
+        readonly color: "#008573" | "#baa7ff";
     }, {
         readonly role: "Attribute";
         readonly sublime: "entity.other.attribute-name";
-        readonly color: "#b4b4b4" | "#646464";
+        readonly color: "#646464" | "#b4b4b4";
     }, {
         readonly role: "String / constant";
         readonly sublime: "string, constant";
-        readonly color: "#3dd68c" | "#0d74ce";
+        readonly color: "#0d74ce" | "#3dd68c";
     }, {
         readonly role: "Function";
         readonly sublime: "entity.name.function";
-        readonly color: "#ecebe8" | "#202020";
+        readonly color: "#202020" | "#ecebe8";
     }, {
         readonly role: "Punctuation";
         readonly sublime: "punctuation";
@@ -134,7 +134,7 @@ export declare const mauiThemeTokens: {
     }, {
         readonly role: "Bracket / accent";
         readonly sublime: "brackets";
-        readonly color: "#a8a6f0" | "#3e63dd";
+        readonly color: "#3e63dd" | "#a8a6f0";
     }];
 };
 export declare const mauiShikiThemeDark: ThemeRegistration;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tanishqkancharla/maui",
-	"version": "0.0.56",
+	"version": "0.0.58",
 	"description": "Maui design system",
 	"type": "module",
 	"main": "./dist/maui.js",
@@ -79,68 +79,66 @@
 	"author": "Tanishq Kancharla",
 	"license": "MIT",
 	"devDependencies": {
-		"@base-ui/react": "^1.8.0",
-		"@modelcontextprotocol/sdk": "^1.30.0",
+		"@base-ui/react": "^1.9.0",
+		"@modelcontextprotocol/sdk": "^1.32.1",
 		"@resvg/resvg-js": "^2.6.2",
 		"@silk-hq/components": "^0.10.1",
-		"@tiptap/core": "^3.29.2",
-		"@tiptap/extension-placeholder": "^3.29.2",
-		"@tiptap/markdown": "^3.29.2",
-		"@tiptap/pm": "^3.29.2",
-		"@tiptap/react": "^3.29.2",
-		"@tiptap/starter-kit": "^3.29.2",
-		"@types/dedent": "^0.7.2",
-		"@types/lodash": "^4.17.24",
-		"@types/node": "^25.9.2",
-		"@types/react": "^19.2.17",
-		"@types/react-dom": "^19.2.3",
-		"@vitejs/plugin-react": "^6.0.2",
-		"agentation": "^3.0.2",
-		"agentation-mcp": "^1.2.0",
+		"@tiptap/core": "^3.32.0",
+		"@tiptap/extension-placeholder": "^3.32.0",
+		"@tiptap/markdown": "^3.32.0",
+		"@tiptap/pm": "^3.32.0",
+		"@tiptap/react": "^3.32.0",
+		"@tiptap/starter-kit": "^3.32.0",
+		"@types/lodash": "^4.17.27",
+		"@types/node": "^26.6.5",
+		"@types/react": "^19.3.0",
+		"@types/react-dom": "^19.3.0",
+		"@vitejs/plugin-react": "^6.1.2",
+		"agentation": "^3.1.2",
+		"agentation-mcp": "^1.3.2",
 		"dialkit": "^2.0.2",
-		"esbuild": "^0.28.0",
+		"esbuild": "^0.28.2",
 		"libretto-browser-tools": "^0.1.2",
-		"motion": "^13.2.0",
+		"motion": "^14.6.0",
 		"process": "^0.11.10",
-		"satori": "^0.29.0",
+		"satori": "^0.63.2",
 		"serve": "^14.2.6",
-		"tsx": "^4.22.4",
-		"typescript": "^6.0.3",
-		"vercel": "^54.10.3",
-		"vite": "^8.0.16",
-		"vitest": "^4.1.8"
+		"tsx": "^4.23.15",
+		"typescript": "^7.0.2",
+		"vite": "^8.3.5",
+		"vitest": "^5.0.5"
 	},
 	"dependencies": {
-		"@codemirror/autocomplete": "^6.20.3",
-		"@codemirror/commands": "^6.11.0",
+		"@codemirror/autocomplete": "^6.20.4",
+		"@codemirror/commands": "^6.11.1",
 		"@codemirror/lang-javascript": "^6.2.5",
-		"@codemirror/language": "^6.12.4",
+		"@codemirror/language": "^6.13.1",
 		"@codemirror/lint": "^6.9.7",
-		"@codemirror/state": "^6.7.1",
-		"@codemirror/view": "^6.43.9",
+		"@codemirror/state": "^6.7.6",
+		"@codemirror/view": "^6.43.15",
 		"@fontsource/commit-mono": "^5.3.0",
-		"@lezer/highlight": "^1.2.3",
+		"@lezer/highlight": "^1.2.5",
 		"@radix-ui/colors": "^3.0.0",
-		"@streamdown/code": "^1.1.1",
+		"@streamdown/code": "^2.0.0",
 		"@types/inline-style-prefixer": "^5.0.3",
-		"@uiw/react-codemirror": "^4.25.11",
+		"@uiw/react-codemirror": "^4.25.12",
 		"beautiful-mermaid": "^1.1.3",
 		"dedent": "^1.7.2",
 		"inline-style-prefixer": "^7.0.1",
 		"lodash": "^4.18.1",
-		"prettier": "^3.9.6",
+		"prettier": "^3.9.10",
 		"purse-styles": "^0.2.6",
 		"react": "^19.0.0",
-		"react-aria": "^3.49.0",
-		"react-aria-components": "^1.19.0",
+		"react-aria": "^3.53.1",
+		"react-aria-components": "^1.22.1",
 		"react-dom": "^19.0.0",
-		"react-stately": "^3.47.0",
-		"shiki": "^4.3.0",
-		"streamdown": "^2.5.0",
+		"react-stately": "^3.51.0",
+		"shiki": "^4.5.0",
+		"streamdown": "^2.7.1",
 		"sucrase": "^3.35.1",
 		"tuple-database": "^2.2.4",
 		"use-state-dispatch": "^0.6.0",
-		"wouter": "^3.10.0"
+		"wouter": "^3.13.0"
 	},
 	"peerDependencies": {
 		"@tiptap/core": "^3.29.2",
@@ -149,7 +147,7 @@
 		"@tiptap/pm": "^3.29.2",
 		"@tiptap/react": "^3.29.2",
 		"@tiptap/starter-kit": "^3.29.2",
-		"motion": "^13.2.0",
+		"motion": "^13.2.0 || ^14.0.0",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0"
 	},
@@ -172,5 +170,10 @@
 		"@tiptap/starter-kit": {
 			"optional": true
 		}
+	},
+	"overrides": {
+		"compression": "^1.8.2",
+		"fflate": "^0.8.3",
+		"uuid": "^11.1.1"
 	}
 }

package/skills/maui/references/components/buttons.md

@@ -30,7 +30,7 @@ Styled React Aria `Button` (default `type="button"`). Consumes `ButtonContext`,
 | `onClick` | Still supported. React Aria also exposes `onPress` |
 | `children` | Text is wrapped for cap-height trim; SVG icons sit beside text. Icon-only needs `aria-label` |
 
-Primary: fill step 9, hover 10, light text (`onAccent`, or step 12 on amber/lime/mint/sky/yellow). Custom CSS fill drops alpha; hover is `l - 0.04`; text is white or near-black from lightness. Its raised shadow strengthens the white inset highlight and tints the tight outer edge from the fill. Quiet: no fill; `variantColor` tints the label/icon. Hover/press mix `grayAlpha[9]` (or that color’s alpha 9, or the hex) into transparent at 6% light / 9% dark; press is 2×. Hover fills snap.
+Primary: fill step 9, light text (`onAccent`, or step 12 on amber/lime/mint/sky/yellow). Custom CSS fill drops alpha; text is white or near-black from lightness. The fill is a diagonal gradient (`to top left`) from the fill shifted by OKLCH `l − 0.027`, `c × 1.05`, `h − 6.8` to the fill itself. The shadow keeps the white inset highlight and tints a 0.5px edge (`l − 0.1`) and a soft lift from the fill — no neutral gray. Hover layers a white-to-transparent sheen over the gradient; disabled drops the gradient. Quiet: no fill; `variantColor` tints the label/icon. Hover/press mix `grayAlpha[9]` (or that color’s alpha 9, or the hex) into transparent at 6% light / 9% dark; press is 2×. Hover fills snap.
 
 While a menu or overlay is open, the trigger keeps the active fill via RAC `data-pressed` / `aria-expanded` (same tokens as `:active`: `elementActive`, or primary step 10).
 

package/src/components/Button.tsx

@@ -31,6 +31,7 @@ const disabledRaised = {
 	opacity: 1,
 	color: colors.gray[8],
 	backgroundColor: backgroundColor.element,
+	backgroundImage: "none",
 	boxShadow: buttonShadow,
 } as const
 
@@ -187,34 +188,48 @@ function onSolidText(color: string) {
 	return `oklch(from ${color} clamp(0.2, (0.75 - l) * 100, 0.99) 0 0)`
 }
 
+/** Darker shade of a fill (OKLCH lightness offset) at an alpha. */
+function fillShade(color: string, lightnessOffset: number, alpha = 1) {
+	return `oklch(from ${color} calc(l - ${lightnessOffset}) c h / ${alpha})`
+}
+
+/** Fill-tinted edge and lift; no neutral gray, so the shadow matches any fill. */
 function primaryButtonShadow(color: string) {
-	return `inset 0 1px #ffffff18, inset 0 0 1px .5px #fff2, 0 1px .5px #0003, 0 0 3px -1px color-mix(in oklch, ${color}, black 35%)`
+	return `inset 0 1px #ffffff18, inset 0 0 1px .5px #fff2, 0 0 0 .5px ${fillShade(color, 0.1)}, 0 1px 2px ${fillShade(color, 0, 0.35)}, 0 3px 8px -3px ${fillShade(color, 0, 0.6)}`
+}
+
+/**
+ * Diagonal from a slightly darker, more saturated, warmer-rotated fill to the
+ * fill. The offsets are the OKLCH delta between Campsite's #FB432C → #FF591E.
+ */
+function primaryButtonGradient(color: string) {
+	return `linear-gradient(to top left, oklch(from ${color} calc(l - 0.027) calc(c * 1.05) calc(h - 6.8)), ${color})`
 }
 
+/** Hover lightens the top of the gradient instead of replacing the fill. */
+const primaryHoverSheen = `linear-gradient(to bottom, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0))`
+
+const primaryClass = memoize((fill: string, textColor: string) => {
+	const primaryShadow = primaryButtonShadow(fill)
+	const gradient = primaryButtonGradient(fill)
+	return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
+		color: textColor,
+		backgroundColor: fill,
+		backgroundImage: gradient,
+		boxShadow: primaryShadow,
+		"&:hover:not(:disabled)": {
+			backgroundImage: `${primaryHoverSheen}, ${gradient}`,
+		},
+		"&:disabled": disabledRaised,
+	})
+})
+
 const coloredButtonClass = memoize(
 	(variant: "primary" | "quiet", color: ButtonVariantColor) => {
 		if (isCssColor(color)) {
 			const fill = opaqueColor(color)
 			if (variant === "primary") {
-				const hover = surfaceWash(
-					colors.gray[12],
-					surfaceMixPercent.hover,
-					fill,
-				)
-				const primaryShadow = primaryButtonShadow(fill)
-				return style(
-					buttonBaseClass,
-					focusRing("&:focus-visible", primaryShadow),
-					{
-						color: onSolidText(fill),
-						backgroundColor: fill,
-						boxShadow: primaryShadow,
-						"&:hover:not(:disabled)": {
-							backgroundColor: hover,
-						},
-						"&:disabled": disabledRaised,
-					},
-				)
+				return primaryClass(fill, onSolidText(fill))
 			}
 
 			return quietClass(fill, darkerFill(fill), fill)
@@ -222,24 +237,9 @@ const coloredButtonClass = memoize(
 
 		const scale = paletteFill(color)
 		if (variant === "primary") {
-			const primaryShadow = primaryButtonShadow(scale[9])
-			const hover = surfaceWash(
-				colors.gray[12],
-				surfaceMixPercent.hover,
+			return primaryClass(
 				scale[9],
-			)
-			return style(
-				buttonBaseClass,
-				focusRing("&:focus-visible", primaryShadow),
-				{
-					color: darkTextOnSolid.has(color) ? scale[12] : "white",
-					backgroundColor: scale[9],
-					boxShadow: primaryShadow,
-					"&:hover:not(:disabled)": {
-						backgroundColor: hover,
-					},
-					"&:disabled": disabledRaised,
-				},
+				darkTextOnSolid.has(color) ? scale[12] : "white",
 			)
 		}
 

package/src/pages/ButtonsPage.tsx

@@ -85,8 +85,9 @@ export function ButtonsPage() {
 				<Code>variant="primary"</Code> fills with step 9 of{" "}
 				<Code>variantColor</Code> (a palette name, default <Code>"accent"</Code>
 				). Pass a hex or <Code>rgb()</Code> string to use that color as the fill
-				(alpha is dropped). Primary buttons use a stronger inset highlight and a
-				tight edge tinted from the fill.
+				(alpha is dropped). The fill is a subtle diagonal gradient from a
+				slightly darker, warmer shade of that color, and the edge and lift
+				shadows are tinted from it. Hover adds a white sheen at the top.
 			</P>
 			<Flex row alignItems="center" gap={4} style={{ flexWrap: "wrap" }}>
 				<Button variant="primary">Save</Button>