@tanishqkancharla/maui 0.0.39 → 0.0.40

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.js

@@ -12,7 +12,7 @@ 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" });
@@ -46,7 +46,7 @@ const inputFrameClass = style({
 const inputWithHintClass = style({
     paddingRight: "28px",
 });
-const keyboardHintClass = style({
+const keyboardHintClass = style(monospace, {
     position: "absolute",
     top: "50%",
     right: spacing.value(4),
@@ -65,7 +65,7 @@ function useKeyboardHint() {
 }
 function KeyboardHint(props) {
     const className = useStyles(keyboardHintClass);
-    return (_jsx(Kbd, { className: className, "aria-hidden": "true", children: props.children }));
+    return (_jsx(Kbd, { variant: "quiet", className: className, "aria-hidden": "true", children: props.children }));
 }
 export function TextField(props) {
     const { keyboardHint, ...fieldProps } = props;

package/dist/maui.d.ts

@@ -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/package.json

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

package/src/components/Code.tsx

@@ -7,6 +7,12 @@ import { monospace, text } from "../tokens/text"
 
 type CodeProps = React.HTMLAttributes<HTMLElement>
 
+export type KbdVariant = "default" | "quiet"
+
+export type KbdProps = CodeProps & {
+	variant?: KbdVariant
+}
+
 const codeClass = style(
 	monospace,
 	radius.sm,
@@ -36,6 +42,10 @@ const kbdClass = style(
 	},
 )
 
+const quietKbdClass = style(kbdClass, {
+	backgroundColor: "transparent",
+})
+
 export function Code({ className, children, ...props }: CodeProps) {
 	const codeClassName = useStyles(codeClass)
 
@@ -46,8 +56,15 @@ export function Code({ className, children, ...props }: CodeProps) {
 	)
 }
 
-export function Kbd({ className, children, ...props }: CodeProps) {
-	const kbdClassName = useStyles(kbdClass)
+export function Kbd({
+	className,
+	children,
+	variant = "default",
+	...props
+}: KbdProps) {
+	const kbdClassName = useStyles(
+		variant === "quiet" ? quietKbdClass : kbdClass,
+	)
 
 	return (
 		<kbd {...props} className={joinClassNames(kbdClassName, className)}>

package/src/components/Input.tsx

@@ -21,7 +21,7 @@ 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"
 
@@ -79,13 +79,16 @@ const inputWithHintClass = style({
 	paddingRight: "28px",
 })
 
-const keyboardHintClass = style({
-	position: "absolute",
-	top: "50%",
-	right: spacing.value(4),
-	transform: "translateY(-50%)",
-	pointerEvents: "none",
-})
+const keyboardHintClass = style(
+	monospace,
+	{
+		position: "absolute",
+		top: "50%",
+		right: spacing.value(4),
+		transform: "translateY(-50%)",
+		pointerEvents: "none",
+	},
+)
 
 function useKeyboardHint() {
 	const [isFocused, setIsFocused] = useState(false)
@@ -101,7 +104,7 @@ function useKeyboardHint() {
 function KeyboardHint(props: { children: string }) {
 	const className = useStyles(keyboardHintClass)
 	return (
-		<Kbd className={className} aria-hidden="true">
+		<Kbd variant="quiet" className={className} aria-hidden="true">
 			{props.children}
 		</Kbd>
 	)

package/src/maui.ts

@@ -168,7 +168,7 @@ export {
 	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,