@viraui/react 1.0.12 → 1.0.13

package/dist/catalog.json

@@ -26,6 +26,12 @@
       "summary": "Overlapping avatar stack with shared sizing, directional layout, and an optional overflow pill.",
       "guidePath": "./components/avatar-group/avatar-group.guide.json"
     },
+    {
+      "id": "badge",
+      "name": "Badge",
+      "summary": "Decorative status-dot overlay that wraps a child, with optional radial mask cutout on the child around the corner dot.",
+      "guidePath": "./components/badge/badge.guide.json"
+    },
     {
       "id": "bleed",
       "name": "Bleed",

package/dist/components/badge/badge.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-badge-size{syntax:"<length>";inherits:true;initial-value:12px}@property --vui-badge-color{syntax:"<color>";inherits:true;initial-value:#292929}@property --_badge-hole-progress{syntax:"<number>";inherits:true;initial-value:0}.viraui__badge-module__Badge_lJqlY{--vui-badge-color:var(--global-primary);--vui-badge-size:0.074rem;--vui-badge-position-x:100%;--vui-badge-position-y:0%;--_badge-gap:calc(var(--vui-badge-size) * 0.25);--_badge-mask-size:calc(var(--vui-badge-size) / 2 + var(--_badge-gap));--_badge-hole-progress:0;position:relative;display:inline-flex;&[data-position=top-end]{--vui-badge-position-x:100%;--vui-badge-position-y:0%}&[data-position=top-start]{--vui-badge-position-x:0%;--vui-badge-position-y:0%}&[data-position=bottom-end]{--vui-badge-position-x:100%;--vui-badge-position-y:100%}&[data-position=bottom-start]{--vui-badge-position-x:0%;--vui-badge-position-y:100%}&>*{outline-offset:-4px}&[data-show=true]{&:after{content:"";width:var(--vui-badge-size);aspect-ratio:1;display:block;border-radius:100000px;background:var(--vui-badge-color);position:absolute;left:calc(var(--vui-badge-position-x) - min(var(--vui-badge-position-x), var(--vui-badge-size)));top:calc(var(--vui-badge-position-y) - min(var(--vui-badge-position-y), var(--vui-badge-size)));pointer-events:none;transform-origin:center}&:not([data-exit]):after{transform:scale(0);animation:viraui__badge-module__badge-dot-in_SKMx8 var(--duration-fast) var(--easing-entrance) 60ms forwards}&[data-exit]:after{transform:scale(1);animation:viraui__badge-module__badge-dot-out_vWhcP var(--duration-fast) var(--easing-entrance) forwards}&>*{mask-image:radial-gradient(circle at calc(var(--vui-badge-position-x) - min(var(--vui-badge-position-x), var(--vui-badge-size)) + (var(--vui-badge-size) / 2)) calc(var(--vui-badge-position-y) - min(var(--vui-badge-position-y), var(--vui-badge-size)) + (var(--vui-badge-size) / 2)),#0000 0 calc(var(--_badge-mask-size) * var(--_badge-hole-progress)),red calc(var(--_badge-mask-size) * var(--_badge-hole-progress) + 1px))}&:not([data-exit])>*{animation:viraui__badge-module__badge-hole-in_71iZP var(--duration-fast) var(--easing-entrance) forwards}&[data-exit]>*{--_badge-hole-progress:1;animation:viraui__badge-module__badge-hole-out_JCHCf var(--duration-fast) var(--easing-entrance) 60ms forwards}@media (prefers-reduced-motion:reduce){&:after{transform:none}&:after,&>*{animation:none}&>*{--_badge-hole-progress:1}&[data-exit]>*{--_badge-hole-progress:0}}}}@keyframes viraui__badge-module__badge-hole-in_71iZP{0%{--_badge-hole-progress:0}to{--_badge-hole-progress:1}}@keyframes viraui__badge-module__badge-hole-out_JCHCf{0%{--_badge-hole-progress:1}to{--_badge-hole-progress:0}}@keyframes viraui__badge-module__badge-dot-in_SKMx8{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes viraui__badge-module__badge-dot-out_vWhcP{0%{transform:scale(1)}to{transform:scale(0)}}}

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,39 @@
+import { ThemeTypes } from '@viraui/foundation/vira/types';
+import type * as React from 'react';
+export type BadgePosition = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';
+/**
+ * Public Badge props.
+ *
+ * Includes standard `div` attributes such as `children`, `id`, `className`, and event handlers,
+ * plus Vira-owned decorative status-dot controls.
+ *
+ * @default Native div pass-through props keep React defaults.
+ */
+export type BadgeProps = React.ComponentPropsWithRef<'div'> & {
+    /**
+     * Diameter of the status dot via `--vui-badge-size`.
+     *
+     * @default '12px'
+     */
+    size?: string;
+    /**
+     * Highlight token driving the status-dot color via `--vui-badge-color`.
+     *
+     * @default `var(--global-primary)` when omitted
+     */
+    color?: ThemeTypes['highlight'];
+    /**
+     * When true, shows the decorative status dot and applies the radial mask cutout.
+     * Enter: hole expands, then the dot scales in. Exit: reverse (dot then hole).
+     *
+     * @default false
+     */
+    show?: boolean;
+    /**
+     * Places the status dot on a corner of the wrapped content.
+     *
+     * @default 'top-end'
+     */
+    position?: BadgePosition;
+};
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/badge/badge.guide.json

@@ -0,0 +1,55 @@
+{
+  "name": "Badge",
+  "structure": "<Badge>{child}</Badge>",
+  "summary": "Decorative status-dot overlay that wraps a child, with optional radial mask cutout on the child around the corner dot.",
+  "whenToUse": [
+    "Show online/offline or presence on an Avatar or icon without changing the child component API",
+    "Mark a control as needing attention with a small corner indicator",
+    "Keep Chip for labeled text badges; use Badge only for the status-dot overlay"
+  ],
+  "whenNotToUse": [
+    "Conveying critical status that assistive tech must announce — put real meaning in the child name or nearby text",
+    "Labeled text badges or tags — use Chip",
+    "Count or text inside a pill — out of scope for v1"
+  ],
+  "accessibility": [
+    "The status dot is a decorative ::after pseudo — not exposed to assistive tech",
+    "Do not rely on the dot alone for status; keep real meaning in the child's accessible name or nearby text",
+    "Children retain native semantics; Badge itself is a presentational div wrap",
+    "Enter/exit motion (hole↔dot, reverse on hide) is suppressed under prefers-reduced-motion"
+  ],
+  "antiPatterns": [
+    "Using the visible dot as the only source of status for assistive tech",
+    "Wrapping multiple element children when only one should receive the radial mask cutout",
+    "Expecting the dot to participate in hit-testing"
+  ],
+  "related": ["Avatar", "AvatarGroup", "Chip", "Annotate"],
+  "properties": {
+    "react": {
+      "size": {
+        "description": "Diameter of the status dot via --vui-badge-size. Defaults to 12px.",
+        "refCss": "size"
+      },
+      "color": {
+        "description": "Highlight token driving the status-dot color via --vui-badge-color. When omitted, falls back to var(--global-primary).",
+        "refCss": "color"
+      },
+      "show": {
+        "description": "When true, shows the decorative status dot and applies the radial mask cutout to the direct child. Enter: hole expands from center, then the dot scales in. Exit: reverse (dot then hole). Defaults to false."
+      },
+      "position": {
+        "description": "Corner placement for the status dot (top-end, top-start, bottom-end, bottom-start). Defaults to top-end."
+      }
+    },
+    "css": {
+      "size": {
+        "description": "Status-dot diameter. Defaults to 12px.",
+        "refReact": "size"
+      },
+      "color": {
+        "description": "Status-dot accent color. Defaults to var(--global-primary).",
+        "refReact": "color"
+      }
+    }
+  }
+}

package/dist/components/badge/badge.js

@@ -0,0 +1,50 @@
+import './badge.css';
+import { clsx } from "../../core/clsx.js";
+import badge_module_default from "./badge.module.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+//#region src/components/badge/badge.tsx
+var prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+var Badge = ({ size = "10px", children, className, color, position = "top-end", ref, show = false, style, ...otherProps }) => {
+	const [present, setPresent] = useState(show);
+	const [exiting, setExiting] = useState(false);
+	useEffect(() => {
+		if (show) {
+			setPresent(true);
+			setExiting(false);
+			return;
+		}
+		if (!present) return;
+		if (prefersReducedMotion()) {
+			setPresent(false);
+			setExiting(false);
+			return;
+		}
+		setExiting(true);
+	}, [show, present]);
+	const handleAnimationEnd = (event) => {
+		if (!exiting) return;
+		if (!(event.target instanceof HTMLElement) || event.target.parentElement !== event.currentTarget) return;
+		if (!event.animationName.includes("badge-hole-out")) return;
+		setPresent(false);
+		setExiting(false);
+	};
+	const dynamicStyle = {
+		"--vui-badge-size": size,
+		...color && { "--vui-badge-color": `var(--highlight-${color})` },
+		...style
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...otherProps,
+		ref,
+		className: clsx(badge_module_default.Badge, className),
+		"data-exit": exiting ? "true" : void 0,
+		"data-position": position,
+		"data-show": present ? "true" : void 0,
+		style: dynamicStyle,
+		onAnimationEnd: handleAnimationEnd,
+		children
+	});
+};
+//#endregion
+export { Badge };

package/dist/components/badge/badge.module.js

@@ -0,0 +1,11 @@
+//#region src/components/badge/badge.module.css
+var Badge = "viraui__badge-module__Badge_lJqlY";
+var badge_module_default = {
+	Badge,
+	"badge-dot-in": "viraui__badge-module__badge-dot-in_SKMx8",
+	"badge-dot-out": "viraui__badge-module__badge-dot-out_vWhcP",
+	"badge-hole-in": "viraui__badge-module__badge-hole-in_71iZP",
+	"badge-hole-out": "viraui__badge-module__badge-hole-out_JCHCf"
+};
+//#endregion
+export { Badge, badge_module_default as default };

package/dist/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './badge';
+export type { BadgePosition, BadgeProps } from './badge';

package/dist/components/button/button-link.js

@@ -1,7 +1,7 @@
 import { ButtonChromeChildren, getButtonChromeRootAttrs } from "./button-chrome.js";
 import { jsx } from "react/jsx-runtime";
-import { useRender } from "@base-ui/react/use-render";
 import "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/button/button-link.tsx
 var ButtonLink = ({ children, className, disabled = false, addon, addonPosition = "start", loading = false, pill = false, size = "medium", variant = "primary", render, ref, onClick, ...otherProps }) => {
 	const isDisabled = disabled || loading;

package/dist/components/button/button.js

@@ -1,9 +1,9 @@
 import './button.css';
 import { ButtonChromeChildren, getButtonChromeRootAttrs } from "./button-chrome.js";
 import { jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { Button } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
-import * as React from "react";
 //#region src/components/button/button.tsx
 function usesButtonPrimitiveRender(render) {
 	return render === void 0 || React.isValidElement(render) && render.type === "button";

package/dist/components/chip/chip.js

@@ -3,8 +3,8 @@ import { clsx } from "../../core/clsx.js";
 import { Stack } from "../stack/stack.js";
 import chip_module_default from "./chip.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRender } from "@base-ui/react/use-render";
 import "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/chip/chip.tsx
 var Chip = ({ addon, addonPosition = "start", children, className, ref, render, variant = "primary", ...otherProps }) => {
 	const content = /* @__PURE__ */ jsxs(Stack, {

package/dist/components/clamp-text/clamp-text.js

@@ -2,8 +2,8 @@
 import './clamp-text.css';
 import { clsx } from "../../core/clsx.js";
 import clamp_text_module_default from "./clamp-text.module.js";
-import { useRender } from "@base-ui/react/use-render";
 import { useMemo } from "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/clamp-text/clamp-text.tsx
 var ClampText = ({ className, inline = false, ref, render, rows = 1, style, ...otherProps }) => {
 	const dynamicStyle = useMemo(() => ({ "--vui-clamp-text-rows": rows }), [rows]);

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './accordion';
 export * from './annotate';
 export * from './avatar';
 export * from './avatar-group';
+export * from './badge';
 export * from './bleed';
 export * from './button';
 export * from './checkbox';

package/dist/components/masonry/masonry.js

@@ -6,8 +6,8 @@ import { Stack } from "../stack/stack.js";
 import masonry_module_default from "./masonry.module.js";
 import { MasonryItem } from "./masonry-item.js";
 import { jsx } from "react/jsx-runtime";
-import { useRender } from "@base-ui/react/use-render";
 import { Children, useEffect, useRef, useState } from "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/masonry/masonry.tsx
 var DEFAULT_BREAKPOINT_COLS = {
 	default: 1,

package/dist/index.js

@@ -2,6 +2,7 @@ import { Accordion } from "./components/accordion/accordion.js";
 import { Annotate } from "./components/annotate/annotate.js";
 import { Avatar } from "./components/avatar/avatar.js";
 import { AvatarGroup } from "./components/avatar-group/avatar-group.js";
+import { Badge } from "./components/badge/badge.js";
 import { Bleed } from "./components/bleed/bleed.js";
 import { Spinner } from "./components/spinner/spinner.js";
 import { Button } from "./components/button/button.js";
@@ -51,4 +52,4 @@ import { ToggleGroup } from "./components/toggle-group/toggle-group.js";
 import { Typewriter } from "./components/typewriter/typewriter.js";
 import { TooltipContent } from "./components/tooltip/tooltip-content.js";
 import { Tooltip, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
-export { Accordion, Annotate, Avatar, AvatarGroup, Bleed, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, IconButton, IconButtonLink, LinearProgress, Masonry, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps };
+export { Accordion, Annotate, Avatar, AvatarGroup, Badge, Bleed, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, IconButton, IconButtonLink, LinearProgress, Masonry, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "private": false,
   "files": [
     "dist"
@@ -35,10 +35,10 @@
     "unplugin-dts": "1.0.3",
     "vite": "8.1.4",
     "vite-plugin-static-copy": "4.1.1",
-    "@viraui/foundation": "1.0.12",
     "@viraui/icons": "0.1.7",
     "@viraui/postcss-config": "0.0.18",
-    "@viraui/tsconfig": "0.0.17"
+    "@viraui/tsconfig": "0.0.17",
+    "@viraui/foundation": "1.0.13"
   },
   "peerDependencies": {
     "@base-ui/react": ">=1.6.0",