@tanishqkancharla/maui 0.0.48 → 0.0.49

package/dist/components/LogoIcon.d.ts

@@ -0,0 +1,12 @@
+import { type IconSize } from "../tokens/sizing";
+export type LogoIconProps = {
+    src: string;
+    size?: IconSize;
+    alt?: string;
+};
+/**
+ * Brand artwork in an icon-sized box. Defaults to md (18px, or 24px at Large
+ * scale). Padding is included in the box and scales with it: 2px at 18px.
+ * An empty alt makes the logo decorative; provide alt for standalone images.
+ */
+export declare function LogoIcon({ src, size, alt }: LogoIconProps): import("react").JSX.Element;

package/dist/components/LogoIcon.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { style, useStyles } from "purse-styles";
+import { iconSizeValues } from "../tokens/sizing";
+/**
+ * Brand artwork in an icon-sized box. Defaults to md (18px, or 24px at Large
+ * scale). Padding is included in the box and scales with it: 2px at 18px.
+ * An empty alt makes the logo decorative; provide alt for standalone images.
+ */
+export function LogoIcon({ src, size = "md", alt = "" }) {
+    const className = useStyles(logo);
+    const box = iconSizeValues[size];
+    return (_jsx("img", { src: src, alt: alt, "aria-hidden": alt === "" ? true : undefined, className: className, style: { width: box, height: box, padding: `calc(${box} / 9)` } }));
+}
+const logo = style({
+    display: "block",
+    boxSizing: "border-box",
+    objectFit: "contain",
+    flexShrink: 0,
+});

package/dist/maui.d.ts

@@ -20,6 +20,7 @@ export { prose, proseRhythm, proseHtml, proseStreamingMarkers, type ProseSize, }
 export { visuallyHidden } from "./tokens/visuallyHidden";
 export { Avatar } from "./components/Avatar";
 export { Badge } from "./components/Badge";
+export { LogoIcon, type LogoIconProps } from "./components/LogoIcon";
 export { Button, useButton, type ButtonCssColor, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonVariantColor, } from "./components/Button";
 export { TabBar, type TabBarItem, type TabBarProps, } from "./components/TabBar";
 export { Checkbox } from "./components/Checkbox";

package/dist/maui.js

@@ -23,6 +23,7 @@ export { visuallyHidden } from "./tokens/visuallyHidden";
 // Components
 export { Avatar } from "./components/Avatar";
 export { Badge } from "./components/Badge";
+export { LogoIcon } from "./components/LogoIcon";
 export { Button, useButton, } from "./components/Button";
 export { TabBar, } from "./components/TabBar";
 export { Checkbox } from "./components/Checkbox";

package/package.json

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

package/src/components/LogoIcon.test.tsx

@@ -0,0 +1,30 @@
+import { renderToStaticMarkup } from "react-dom/server"
+import { PurseProvider } from "purse-styles"
+import { afterAll, beforeAll, expect, it, vi } from "vitest"
+import { LogoIcon } from "./LogoIcon"
+
+beforeAll(() => {
+	vi.stubGlobal("document", { createElement: () => ({}) })
+})
+
+afterAll(() => {
+	vi.unstubAllGlobals()
+})
+
+it("is decorative by default and exposes an accessible name when provided", () => {
+	const decorative = renderToStaticMarkup(
+		<PurseProvider>
+			<LogoIcon src="/brand.svg" />
+		</PurseProvider>,
+	)
+	expect(decorative).toContain('alt=""')
+	expect(decorative).toContain('aria-hidden="true"')
+
+	const labeled = renderToStaticMarkup(
+		<PurseProvider>
+			<LogoIcon src="/brand.svg" alt="Example" />
+		</PurseProvider>,
+	)
+	expect(labeled).toContain('alt="Example"')
+	expect(labeled).not.toContain("aria-hidden")
+})

package/src/components/LogoIcon.tsx

@@ -0,0 +1,35 @@
+import { style, useStyles } from "purse-styles"
+import { iconSizeValues, type IconSize } from "../tokens/sizing"
+
+export type LogoIconProps = {
+	src: string
+	size?: IconSize
+	alt?: string
+}
+
+/**
+ * Brand artwork in an icon-sized box. Defaults to md (18px, or 24px at Large
+ * scale). Padding is included in the box and scales with it: 2px at 18px.
+ * An empty alt makes the logo decorative; provide alt for standalone images.
+ */
+export function LogoIcon({ src, size = "md", alt = "" }: LogoIconProps) {
+	const className = useStyles(logo)
+	const box = iconSizeValues[size]
+
+	return (
+		<img
+			src={src}
+			alt={alt}
+			aria-hidden={alt === "" ? true : undefined}
+			className={className}
+			style={{ width: box, height: box, padding: `calc(${box} / 9)` }}
+		/>
+	)
+}
+
+const logo = style({
+	display: "block",
+	boxSizing: "border-box",
+	objectFit: "contain",
+	flexShrink: 0,
+})

package/src/maui.ts

@@ -57,6 +57,7 @@ export { visuallyHidden } from "./tokens/visuallyHidden"
 // Components
 export { Avatar } from "./components/Avatar"
 export { Badge } from "./components/Badge"
+export { LogoIcon, type LogoIconProps } from "./components/LogoIcon"
 export {
 	Button,
 	useButton,