@tanishqkancharla/maui 0.0.38 → 0.0.40

package/dist/components/Button.js

@@ -10,17 +10,18 @@ import { colors, } from "../tokens/colors";
 import { focusRing } from "../tokens/focusRing";
 import { radius } from "../tokens/radius";
 import { motion } from "../tokens/motion";
-import { shadow, shadowVars, tintedSubtle } from "../tokens/shadow";
+import { shadowVars } from "../tokens/shadow";
 import { controlSize } from "../tokens/sizing";
 import { spacing } from "../tokens/spacing";
 import { text } from "../tokens/text";
 import { memoize } from "../utils/memoize";
+const buttonShadow = shadowVars.control;
 const disabledRaised = {
     cursor: "default",
     opacity: 1,
     color: colors.gray[8],
     backgroundColor: backgroundColor.element,
-    boxShadow: shadowVars.subtle,
+    boxShadow: buttonShadow,
 };
 const disabledQuiet = {
     cursor: "default",
@@ -29,7 +30,7 @@ const disabledQuiet = {
     backgroundColor: "transparent",
     boxShadow: "none",
 };
-const buttonBaseClass = style(text({ size: "xs", fontWeight: 400, color: "highContrast" }), focusRing("&:focus-visible", shadowVars.subtle), motion.standard("box-shadow", "background-color", "color"), shadow.subtle, spacing.padding({ x: 6, y: 4 }), radius.sm, {
+const buttonBaseClass = style(text({ size: "xs", fontWeight: 400, color: "highContrast" }), focusRing("&:focus-visible", buttonShadow), motion.standard("box-shadow", "background-color", "color"), spacing.padding({ x: 6, y: 4 }), radius.sm, {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
@@ -38,6 +39,7 @@ const buttonBaseClass = style(text({ size: "xs", fontWeight: 400, color: "highCo
     height: controlSize.height,
     minWidth: controlSize.minTarget,
     border: "none",
+    boxShadow: buttonShadow,
     textOverflow: "ellipsis",
     overflow: "hidden",
     whiteSpace: "nowrap",
@@ -129,16 +131,19 @@ function darkerFill(color) {
 function onSolidText(color) {
     return `oklch(from ${color} clamp(0.2, (0.75 - l) * 100, 0.99) 0 0)`;
 }
+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%)`;
+}
 const coloredButtonClass = memoize((variant, color) => {
     if (isCssColor(color)) {
         const fill = opaqueColor(color);
         if (variant === "primary") {
-            const edge = tintedSubtle(fill);
             const hover = darkerFill(fill);
-            return style(buttonBaseClass, focusRing("&:focus-visible", edge), {
+            const primaryShadow = primaryButtonShadow(fill);
+            return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
                 color: onSolidText(fill),
                 backgroundColor: fill,
-                boxShadow: edge,
+                boxShadow: primaryShadow,
                 "&:hover:not(:disabled)": {
                     backgroundColor: hover,
                 },
@@ -152,11 +157,11 @@ const coloredButtonClass = memoize((variant, color) => {
     }
     const scale = paletteFill(color);
     if (variant === "primary") {
-        const edge = tintedSubtle(scale[9]);
-        return style(buttonBaseClass, focusRing("&:focus-visible", edge), {
+        const primaryShadow = primaryButtonShadow(scale[9]);
+        return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
             color: darkTextOnSolid.has(color) ? scale[12] : "white",
             backgroundColor: scale[9],
-            boxShadow: edge,
+            boxShadow: primaryShadow,
             "&:hover:not(:disabled)": {
                 backgroundColor: scale[10],
             },

package/dist/components/Checkbox.js

@@ -18,7 +18,7 @@ const checkboxSize = defineVars({
     box: { default: "14px", [LARGE_SCALE]: "20px" },
     checkmark: { default: "10px", [LARGE_SCALE]: "14px" },
 });
-const checkboxClass = style(flex({ alignItems: "center", gap: 3 }), focusRing("& .checkbox-input:focus-visible + .checkbox-toggle", shadowVars.subtle), {
+const checkboxClass = style(flex({ alignItems: "center", gap: 3 }), focusRing("& .checkbox-input:focus-visible + .checkbox-toggle", shadowVars.control), {
     position: "relative",
     width: "fit-content",
     minHeight: controlSize.minTarget,
@@ -34,7 +34,7 @@ const checkboxClass = style(flex({ alignItems: "center", gap: 3 }), focusRing("&
         transform: "scale(1)",
     },
 });
-const checkboxToggleClass = style(flex({ alignItems: "center", justifyContent: "center" }), radius["2xs"], motion.standard("background-color"), shadow.subtle, {
+const checkboxToggleClass = style(flex({ alignItems: "center", justifyContent: "center" }), radius["2xs"], motion.standard("background-color"), shadow.control, {
     pointerEvents: "none",
     flexShrink: 0,
     width: checkboxSize.box,

package/dist/components/Code.d.ts

@@ -1,5 +1,9 @@
 import type React from "react";
 type CodeProps = React.HTMLAttributes<HTMLElement>;
+export type KbdVariant = "default" | "quiet";
+export type KbdProps = CodeProps & {
+    variant?: KbdVariant;
+};
 export declare function Code({ className, children, ...props }: CodeProps): React.JSX.Element;
-export declare function Kbd({ className, children, ...props }: CodeProps): React.JSX.Element;
+export declare function Kbd({ className, children, variant, ...props }: KbdProps): React.JSX.Element;
 export {};

package/dist/components/Code.js

@@ -22,12 +22,15 @@ const kbdClass = style(text({ size: "xs", fontWeight: 400, color: "lowContrast"
     paddingBlock: 0,
     whiteSpace: "nowrap",
 });
+const quietKbdClass = style(kbdClass, {
+    backgroundColor: "transparent",
+});
 export function Code({ className, children, ...props }) {
     const codeClassName = useStyles(codeClass);
     return (_jsx("code", { ...props, className: joinClassNames(codeClassName, className), children: children }));
 }
-export function Kbd({ className, children, ...props }) {
-    const kbdClassName = useStyles(kbdClass);
+export function Kbd({ className, children, variant = "default", ...props }) {
+    const kbdClassName = useStyles(variant === "quiet" ? quietKbdClass : kbdClass);
     return (_jsx("kbd", { ...props, className: joinClassNames(kbdClassName, className), children: children }));
 }
 function joinClassNames(...classNames) {

package/dist/components/Input.d.ts

@@ -1,7 +1,14 @@
 import { AriaNumberFieldProps, AriaSearchFieldProps, AriaTextFieldOptions } from "react-aria";
-type InputProps = AriaTextFieldOptions<"input">;
-export declare function TextField(props: InputProps): import("react").JSX.Element;
-export declare function SearchField(props: AriaSearchFieldProps): import("react").JSX.Element;
+type KeyboardHintProps = {
+    /** A single-character shortcut displayed at the inline end while unfocused. */
+    keyboardHint?: string;
+};
+export type TextFieldProps = AriaTextFieldOptions<"input"> & KeyboardHintProps;
+export type SearchFieldProps = AriaSearchFieldProps & KeyboardHintProps & {
+    "aria-keyshortcuts"?: string;
+};
+export declare function TextField(props: TextFieldProps): import("react").JSX.Element;
+export declare function SearchField(props: SearchFieldProps): import("react").JSX.Element;
 export declare function NumberField(props: AriaNumberFieldProps): import("react").JSX.Element;
-export declare function QuietTextField(props: InputProps): import("react").JSX.Element;
+export declare function QuietTextField(props: TextFieldProps): import("react").JSX.Element;
 export {};

package/dist/components/Input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
-import { useButton, useLocale, useNumberField, useSearchField, useTextField, } from "react-aria";
+import { useRef, useState } from "react";
+import { mergeProps, useButton, useLocale, useNumberField, useSearchField, useTextField, } from "react-aria";
 import { useNumberFieldState, useSearchFieldState } from "react-stately";
 import { defineVars, style, useStyles } from "purse-styles";
 import { LARGE_SCALE } from "../theme/dataScale";
@@ -12,11 +12,12 @@ import { radius } from "../tokens/radius";
 import { shadow, shadowVars } from "../tokens/shadow";
 import { controlSize, iconSizeValues } from "../tokens/sizing";
 import { spacing } from "../tokens/spacing";
-import { text } from "../tokens/text";
+import { monospace, text } from "../tokens/text";
+import { Kbd } from "./Code";
 import { Icons } from "./Icons";
 const inputText = text({ size: "sm", fontWeight: 400, color: "highContrast" });
 const numberFieldDivider = `color-mix(in oklch, ${colors.gray[12]} 5%, ${backgroundColor.element})`;
-const inputClass = style(inputText, focusRing("&:focus-visible", shadowVars.subtle), motion.standard("background", "border-color"), radius.sm, spacing.padding({ x: 4, y: 2 }), shadow.subtle, {
+const inputClass = style(inputText, focusRing("&:focus-visible", shadowVars.control), motion.standard("background", "border-color"), radius.sm, spacing.padding({ x: 4, y: 2 }), shadow.control, {
     width: "100%",
     minWidth: 0,
     height: controlSize.height,
@@ -31,18 +32,52 @@ const inputClass = style(inputText, focusRing("&:focus-visible", shadowVars.subt
         background: colors.gray[2],
     },
     "&[aria-invalid='true']:not(:focus-visible)": {
-        boxShadow: `0 0 0 1px light-dark(#ce2c31, #e5484d), ${shadowVars.subtle}`,
+        boxShadow: `0 0 0 1px light-dark(#ce2c31, #e5484d), ${shadowVars.control}`,
     },
     "&::placeholder": {
         fontStyle: "italic",
         color: colors.gray[8],
     },
 });
+const inputFrameClass = style({
+    position: "relative",
+    width: "100%",
+});
+const inputWithHintClass = style({
+    paddingRight: "28px",
+});
+const keyboardHintClass = style(monospace, {
+    position: "absolute",
+    top: "50%",
+    right: spacing.value(4),
+    transform: "translateY(-50%)",
+    pointerEvents: "none",
+});
+function useKeyboardHint() {
+    const [isFocused, setIsFocused] = useState(false);
+    return {
+        isFocused,
+        focusProps: {
+            onFocus: () => setIsFocused(true),
+            onBlur: () => setIsFocused(false),
+        },
+    };
+}
+function KeyboardHint(props) {
+    const className = useStyles(keyboardHintClass);
+    return (_jsx(Kbd, { variant: "quiet", className: className, "aria-hidden": "true", children: props.children }));
+}
 export function TextField(props) {
+    const { keyboardHint, ...fieldProps } = props;
     const ref = useRef(null);
-    const { inputProps } = useTextField({ ...props }, ref);
-    const className = useStyles(inputClass);
-    return _jsx("input", { className: className, ref: ref, ...inputProps });
+    const { inputProps } = useTextField(fieldProps, ref);
+    const { isFocused, focusProps } = useKeyboardHint();
+    const frameClassName = useStyles(inputFrameClass);
+    const className = useStyles(inputClass, keyboardHint ? inputWithHintClass : undefined);
+    const input = (_jsx("input", { className: className, ref: ref, ...mergeProps(inputProps, focusProps) }));
+    if (!keyboardHint)
+        return input;
+    return (_jsxs("div", { className: frameClassName, children: [input, !isFocused ? _jsx(KeyboardHint, { children: keyboardHint }) : null] }));
 }
 const searchFieldSize = defineVars({
     clearSize: { default: "16px", [LARGE_SCALE]: "40px" },
@@ -85,17 +120,19 @@ const searchFieldClass = style(focusRing("& button:focus-visible"), {
     },
 });
 export function SearchField(props) {
+    const { keyboardHint, "aria-keyshortcuts": ariaKeyShortcuts, ...fieldProps } = props;
     const ref = useRef(null);
-    const state = useSearchFieldState(props);
-    const { inputProps } = useSearchField(props, state, ref);
+    const state = useSearchFieldState(fieldProps);
+    const { inputProps } = useSearchField(fieldProps, state, ref);
+    const { isFocused, focusProps } = useKeyboardHint();
     const inputClassName = useStyles(inputClass);
     const searchClassName = useStyles(searchFieldClass);
-    return (_jsxs("div", { className: searchClassName, children: [_jsx("input", { className: inputClassName, ref: ref, ...inputProps }), state.value !== "" && (_jsx("button", { "aria-label": "Clear search", type: "button", onMouseDown: (event) => event.preventDefault(), onClick: () => state.setValue(""), children: _jsx(Icons.CircleX, {}) }))] }));
+    return (_jsxs("div", { className: searchClassName, children: [_jsx("input", { className: inputClassName, ref: ref, ...mergeProps(inputProps, focusProps), "aria-keyshortcuts": ariaKeyShortcuts }), keyboardHint && !isFocused && state.value === "" ? (_jsx(KeyboardHint, { children: keyboardHint })) : null, state.value !== "" && (_jsx("button", { "aria-label": "Clear search", type: "button", onMouseDown: (event) => event.preventDefault(), onClick: () => state.setValue(""), children: _jsx(Icons.CircleX, {}) }))] }));
 }
 const numberFieldSize = defineVars({
     stepperWidth: { default: "24px", [LARGE_SCALE]: "40px" },
 });
-const numberFieldClass = style(focusRing("&:has(:focus-visible)", shadowVars.subtle), motion.standard("background", "border-color"), radius.sm, shadow.subtle, {
+const numberFieldClass = style(focusRing("&:has(:focus-visible)", shadowVars.control), motion.standard("background", "border-color"), radius.sm, shadow.control, {
     display: "flex",
     alignItems: "center",
     width: "100%",
@@ -108,7 +145,7 @@ const numberFieldClass = style(focusRing("&:has(:focus-visible)", shadowVars.sub
         background: colors.gray[2],
     },
     "&:has(input[aria-invalid='true']):not(:has(:focus-visible))": {
-        boxShadow: `0 0 0 1px light-dark(#ce2c31, #e5484d), ${shadowVars.subtle}`,
+        boxShadow: `0 0 0 1px light-dark(#ce2c31, #e5484d), ${shadowVars.control}`,
     },
     "& .number-stepper": {
         display: "flex",
@@ -195,8 +232,14 @@ const quietInputClass = style(inputText, focusRing(), motion.standard("backgroun
     },
 });
 export function QuietTextField(props) {
+    const { keyboardHint, ...fieldProps } = props;
     const ref = useRef(null);
-    const { inputProps } = useTextField({ ...props }, ref);
-    const className = useStyles(quietInputClass);
-    return _jsx("input", { className: className, ...inputProps });
+    const { inputProps } = useTextField(fieldProps, ref);
+    const { isFocused, focusProps } = useKeyboardHint();
+    const frameClassName = useStyles(inputFrameClass);
+    const className = useStyles(quietInputClass, keyboardHint ? inputWithHintClass : undefined);
+    const input = (_jsx("input", { className: className, ref: ref, ...mergeProps(inputProps, focusProps) }));
+    if (!keyboardHint)
+        return input;
+    return (_jsxs("div", { className: frameClassName, children: [input, !isFocused ? _jsx(KeyboardHint, { children: keyboardHint }) : null] }));
 }

package/dist/components/Radio.js

@@ -21,7 +21,7 @@ export function RadioOptionGroup(props) {
     const className = useStyles(radioGroupClass);
     return (_jsx(RadioOptionGroupContext.Provider, { value: state, children: _jsxs("div", { className: className, ...groupProps, children: [_jsx(Label, { ...labelProps, children: label }), children] }) }));
 }
-const radioClass = style(flex({ alignItems: "center", gap: 3 }), focusRing("& .radio-input:focus-visible + .radio-toggle", shadowVars.subtle), {
+const radioClass = style(flex({ alignItems: "center", gap: 3 }), focusRing("& .radio-input:focus-visible + .radio-toggle", shadowVars.control), {
     position: "relative",
     width: "fit-content",
     "&:hover .radio-toggle": {
@@ -34,7 +34,7 @@ const radioClass = style(flex({ alignItems: "center", gap: 3 }), focusRing("& .r
         transform: "scale(1)",
     },
 });
-const radioToggleClass = style(radius.circle, motion.standard("background-color"), shadow.subtle, {
+const radioToggleClass = style(radius.circle, motion.standard("background-color"), shadow.control, {
     pointerEvents: "none",
     position: "relative",
     width: "14px",

package/dist/components/Select.js

@@ -19,7 +19,7 @@ const selectClass = style({
     gap: spacing.value(3),
     width: "100%",
 });
-const triggerClass = style(text({ size: "sm", fontWeight: 400, color: "highContrast" }), focusRing("&:focus-visible", shadowVars.subtle), motion.standard("background", "border-color"), radius.sm, spacing.padding({ x: 4, y: 2 }), shadow.subtle, {
+const triggerClass = style(text({ size: "sm", fontWeight: 400, color: "highContrast" }), focusRing("&:focus-visible", shadowVars.control), motion.standard("background", "border-color"), radius.sm, spacing.padding({ x: 4, y: 2 }), shadow.control, {
     display: "flex",
     alignItems: "center",
     height: controlSize.height,
@@ -39,7 +39,7 @@ const triggerClass = style(text({ size: "sm", fontWeight: 400, color: "highContr
         background: colors.gray[2],
     },
     "&[data-invalid]:not(:focus-visible)": {
-        boxShadow: `0 0 0 1px light-dark(#ce2c31, #e5484d), ${shadowVars.subtle}`,
+        boxShadow: `0 0 0 1px light-dark(#ce2c31, #e5484d), ${shadowVars.control}`,
     },
 });
 const valueClass = style({

package/dist/components/Slider.js

@@ -12,7 +12,7 @@ const sliderSize = defineVars({
     thumb: { default: "12px", [LARGE_SCALE]: "20px" },
     track: { default: "18px", [LARGE_SCALE]: "40px" },
 });
-const sliderClass = style(focusRing("& .slider-thumb:has(input:focus-visible)", shadowVars.subtle), {
+const sliderClass = style(focusRing("& .slider-thumb:has(input:focus-visible)", shadowVars.control), {
     width: "240px",
     "& .slider-label-row": {
         display: "flex",
@@ -49,7 +49,7 @@ const sliderClass = style(focusRing("& .slider-thumb:has(input:focus-visible)",
         height: sliderSize.thumb,
         borderRadius: "100%",
         background: colors.gray[12],
-        boxShadow: shadowVars.subtle,
+        boxShadow: shadowVars.control,
         transform: "translateX(-50%)",
     },
     "& .slider-thumb[data-dragging='true']": {

package/dist/components/Switch.js

@@ -30,7 +30,7 @@ const switchOff = defineVars({
         [DARK_THEME]: colors.gray[2],
     },
 });
-const switchClass = style(flex({ alignItems: "center", gap: 3 }), focusRing("& .switch-input:focus-visible + .switch-toggle", shadowVars.subtle), {
+const switchClass = style(flex({ alignItems: "center", gap: 3 }), focusRing("& .switch-input:focus-visible + .switch-toggle", shadowVars.control), {
     position: "relative",
     width: "fit-content",
     minHeight: controlSize.minTarget,
@@ -44,7 +44,7 @@ const switchClass = style(flex({ alignItems: "center", gap: 3 }), focusRing("& .
         transform: `translateX(calc(${switchSize.width} - ${switchSize.thumb} - 4px))`,
     },
 });
-const switchToggleClass = style(radius.pill, motion.standard("background-color"), shadow.subtle, {
+const switchToggleClass = style(radius.pill, motion.standard("background-color"), shadow.control, {
     position: "relative",
     flexShrink: 0,
     width: switchSize.width,

package/dist/components/Table.js

@@ -82,7 +82,7 @@ const tableCaptionClass = style(text({ size: "xs", fontWeight: 400, color: "lowC
 const emptyStateClass = style(text({ size: "sm", fontWeight: 400, color: "lowContrast" }), spacing.padding({ x: 4, y: 8 }), {
     textAlign: "center",
 });
-const tableSelectionCheckboxClass = style(flex({ alignItems: "center", justifyContent: "center" }), focusRing("&[data-focus-visible] .checkbox-toggle", shadowVars.subtle), {
+const tableSelectionCheckboxClass = style(flex({ alignItems: "center", justifyContent: "center" }), focusRing("&[data-focus-visible] .checkbox-toggle", shadowVars.control), {
     position: "relative",
     width: "fit-content",
     cursor: "default",
@@ -108,7 +108,7 @@ const tableSelectionCheckboxClass = style(flex({ alignItems: "center", justifyCo
         transform: "scale(1)",
     },
 });
-const tableSelectionToggleClass = style(flex({ alignItems: "center", justifyContent: "center" }), radius["2xs"], shadow.subtle, {
+const tableSelectionToggleClass = style(flex({ alignItems: "center", justifyContent: "center" }), radius["2xs"], shadow.control, {
     pointerEvents: "none",
     width: "14px",
     height: "14px",

package/dist/maui.d.ts

@@ -25,7 +25,7 @@ export { Checkbox } from "./components/Checkbox";
 export { Switch } from "./components/Switch";
 export { Slider } from "./components/Slider";
 export { RadioOptionGroup, RadioOption } from "./components/Radio";
-export { TextField, SearchField, NumberField, QuietTextField, } from "./components/Input";
+export { TextField, SearchField, NumberField, QuietTextField, type TextFieldProps, type SearchFieldProps, } from "./components/Input";
 export { Select, SelectItem, type SelectProps, type SelectItemProps, } from "./components/Select";
 export { Dialog } from "./components/Dialog";
 export { Tooltip } from "./components/Tooltip";
@@ -45,6 +45,6 @@ export { Flex, Gap, Spacer, Divider, type FlexShadow, type FlexRadius, type Flex
 export { Text, type TextProps } from "./components/Text";
 export { H1, H2, H3, H4, P, Label, labelText, Blockquote, Ul, Ol, Li, Link, } from "./components/Typography";
 export { CodeBlock } from "./components/CodeBlock";
-export { Code, Kbd } from "./components/Code";
+export { Code, Kbd, type KbdProps, type KbdVariant } from "./components/Code";
 export { CollectionPopover, type CollectionPopoverProps, } from "./components/CollectionPopover";
 export { navigationItem } from "./components/navigationItem";

package/dist/tokens/shadow.d.ts

@@ -1,4 +1,5 @@
 export declare const shadowVars: import("purse-styles").VariableGroup<{
+    readonly control: "inset 0 1px #ffffff08, inset 0 0 1px .5px #fff1, 0 1px .5px #00000018, 0 0 3px -1px #000a";
     readonly subtle: `rgba(var(--${string}), 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, var(--${string})) 0px 1px 1px -0.5px, rgba(0, 0, 0, var(--${string})) 0px 3px 3px -1.5px`;
     readonly medium: `rgba(var(--${string}), 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, var(--${string})) 0px 1px 1px -0.5px, rgba(0, 0, 0, var(--${string})) 0px 3px 3px -1.5px, rgba(0, 0, 0, var(--${string})) 0px 6px 6px -3px`;
     readonly strong: `rgba(var(--${string}), 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, var(--${string})) 0px 1px 1px -0.5px, rgba(0, 0, 0, var(--${string})) 0px 3px 3px -1.5px, rgba(0, 0, 0, var(--${string})) 0px 6px 6px -3px, rgba(0, 0, 0, calc(var(--${string}) * 0.67)) 0px 12px 12px -6px, rgba(0, 0, 0, calc(var(--${string}) * 0.67)) 0px 24px 24px -12px`;
@@ -6,6 +7,7 @@ export declare const shadowVars: import("purse-styles").VariableGroup<{
 /** Same offsets as `shadowVars.subtle`, with the ring and blurs tinted from `color`. */
 export declare function tintedSubtle(color: string): string;
 export declare const shadow: {
+    control: import("purse-styles").StyleElement;
     subtle: import("purse-styles").StyleElement;
     medium: import("purse-styles").StyleElement;
     strong: import("purse-styles").StyleElement;

package/dist/tokens/shadow.js

@@ -13,6 +13,7 @@ const shadowParams = defineVars({
 const rgb = shadowParams.foregroundRgb;
 const blur = shadowParams.blurOpacity;
 export const shadowVars = defineVars({
+    control: `inset 0 1px #ffffff08, inset 0 0 1px .5px #fff1, 0 1px .5px #00000018, 0 0 3px -1px #000a`,
     subtle: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px`,
     medium: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px, rgba(0, 0, 0, ${blur}) 0px 6px 6px -3px`,
     strong: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px, rgba(0, 0, 0, ${blur}) 0px 6px 6px -3px, rgba(0, 0, 0, calc(${blur} * 0.67)) 0px 12px 12px -6px, rgba(0, 0, 0, calc(${blur} * 0.67)) 0px 24px 24px -12px`,
@@ -22,6 +23,7 @@ export function tintedSubtle(color) {
     return `oklch(from ${color} l c h / 0.08) 0px 0px 0px 1px, oklch(from ${color} l c h / ${blur}) 0px 1px 1px -0.5px, oklch(from ${color} l c h / ${blur}) 0px 3px 3px -1.5px`;
 }
 export const shadow = {
+    control: style({ boxShadow: shadowVars.control }),
     subtle: style({ boxShadow: shadowVars.subtle }),
     medium: style({ boxShadow: shadowVars.medium }),
     strong: style({ boxShadow: shadowVars.strong }),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tanishqkancharla/maui",
-	"version": "0.0.38",
+	"version": "0.0.40",
 	"description": "Maui design system",
 	"type": "module",
 	"main": "./dist/maui.js",

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

@@ -4,7 +4,7 @@ Gallery: `/components/buttons`. Import from `"maui"`. Overlay and Dialog live on
 
 ## `Button`
 
-Styled React Aria `Button` (default `type="button"`). Consumes `ButtonContext`, so it works as a `MenuTrigger`, `Select`, `DialogTrigger`, `ComboBox`, or `DatePicker` child. Height 28px, `shadow.subtle`, `radius` 4px.
+Styled React Aria `Button` (default `type="button"`). Consumes `ButtonContext`, so it works as a `MenuTrigger`, `Select`, `DialogTrigger`, `ComboBox`, or `DatePicker` child. Height 28px, `shadow.control`, `radius` 4px.
 
 ```tsx
 <Button>Save</Button>
@@ -28,7 +28,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. Edge is `tintedSubtle`. 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, 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.
 
 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).
 
@@ -61,4 +61,3 @@ Full-viewport portal. `onClickOutside` fires when the backdrop itself is the mou
 ```
 
 Edge-anchored mobile nav is [`Drawer`](drawer.md), not this Dialog and not Overlay.
-

package/skills/maui/references/components/form-controls.md

@@ -2,16 +2,18 @@
 
 Gallery: `/components/form-controls`. Import from `"maui"`. [Select](select.md) has its own page.
 
-All fields are 28px tall, full width of the parent, `shadow.subtle` except `QuietTextField`. They take React Aria field props (`value`, `onChange`, `placeholder`, `isDisabled`, `isInvalid`, `aria-label`, `id`, …).
+All fields are 28px tall, full width of the parent, `shadow.control` except `QuietTextField`. They take React Aria field props (`value`, `onChange`, `placeholder`, `isDisabled`, `isInvalid`, `aria-label`, `id`, …).
 
 ```tsx
-<TextField aria-label="Title" placeholder="Title" value={v} onChange={setV} />
-<SearchField aria-label="Search" value={q} onChange={setQ} />   // clear button when non-empty
+<TextField aria-label="Title" placeholder="Title" value={v} onChange={setV} keyboardHint="T" />
+<SearchField aria-label="Search" value={q} onChange={setQ} keyboardHint="/" />   // clear button when non-empty
 <NumberField aria-label="Count" value={n} onChange={setN} minValue={0} maxValue={10} />
 <QuietTextField aria-label="Filter" placeholder="Filter" value={f} onChange={setF} />
 ```
 
-`NumberField` uses tabular numerals so the value does not shift as you step. Invalid (unfocused) adds a red 1px ring on top of `shadow.subtle`. Placeholders are italic `gray[8]`. Cap width in the parent (`maxWidth: 240px` is the gallery default).
+`NumberField` uses tabular numerals so the value does not shift as you step. Invalid (unfocused) adds a red 1px ring on top of `shadow.control`. Placeholders are italic `gray[8]`. Cap width in the parent (`maxWidth: 240px` is the gallery default).
+
+`TextField`, `SearchField`, and `QuietTextField` accept `keyboardHint`, a single-character shortcut rendered at the inline end while the field is unfocused. The hint is presentational; the consuming app owns the keyboard handler. `SearchField` hides it when the query is non-empty so the clear button can use the same space.
 
 ## `Checkbox`
 

package/skills/maui/references/design_conventions.md

@@ -12,15 +12,17 @@ Patterns, demo apps, and the gallery `Panel` preview frame are not package compo
 
 ## Shadows
 
-Use the three-level elevation scale:
+Use `shadow.control` for interactive control surfaces. It combines two inset
+highlights with a compact outer edge. Use the three-level elevation scale for
+other raised surfaces:
 
-- `shadow.subtle` — controls, cards, and ordinary raised surfaces
+- `shadow.subtle` — cards and ordinary raised surfaces
 - `shadow.medium` — tooltips and larger floating panels
 - `shadow.strong` — dropdowns, popovers, and dominant overlays
 
 All three include a 1px ring. Do not also apply `border()`, `borderColor.outline`, or another ring to the same element.
 
-Buttons and form-control surfaces use `shadow.subtle` by default. For compound controls, apply it once to the outer control boundary instead of to every internal button or segment.
+Buttons and form-control surfaces use `shadow.control` by default. For compound controls, apply it once to the outer control boundary instead of to every internal button or segment.
 
 ## Focus
 

package/skills/maui/references/tokens.md

@@ -170,12 +170,14 @@ Controls typically use `sm`. Cards / sidebars use `lg`. Avatars use `circle`.
 ## Shadows and rings
 
 ```ts
-shadow.subtle | shadow.medium | shadow.strong   // style objects
-shadowVars.subtle | .medium | .strong           // raw box-shadow strings
+shadow.control                                  // button/form-control style object
+shadow.subtle | shadow.medium | shadow.strong   // elevation style objects
+shadowVars.control | .subtle | .medium | .strong // raw box-shadow strings
 tintedSubtle(color)                             // subtle ring+blur tinted from a fill
 ```
 
-Every elevation already includes a 1px ring. **Do not also `border()` the same element.**
+`shadow.control` uses inset highlights and a compact outer edge. Every elevation
+already includes a 1px ring. **Do not also `border()` the same element.**
 
 `border(sides, color)`:
 
@@ -184,7 +186,7 @@ Every elevation already includes a 1px ring. **Do not also `border()` the same e
 
 `borderColor.border` / `borderColor.outline` are the raw color strings (hairlines, `borderBottom`).
 
-`focusRing(selector = "&:focus-visible", existingShadow?)` — Radix blue ring. Pass `shadowVars.subtle` as the second argument so a raised control keeps its elevation while focused.
+`focusRing(selector = "&:focus-visible", existingShadow?)` — Radix blue ring. Pass `shadowVars.control` as the second argument so a form control keeps its surface treatment while focused; use the matching elevation variable for other raised surfaces.
 
 `visuallyHidden` — clip an input and keep the styled sibling visible (Checkbox / Switch / Radio).