@viraui/react 0.0.25 → 0.0.27

package/dist/components/typewriter/typewriter.utils.js

@@ -0,0 +1,100 @@
+var resolveTextsKey = (texts, children) => {
+	if (texts?.length) return texts.join("\0");
+	if (typeof children === "string") return children;
+	return "";
+};
+var splitTextsKey = (textsKey) => textsKey ? textsKey.split("\0") : [];
+var graphemeSegmenterCache;
+var getGraphemeSegmenter = () => {
+	if (graphemeSegmenterCache !== void 0) return graphemeSegmenterCache;
+	graphemeSegmenterCache = typeof Intl !== "undefined" && typeof Intl.Segmenter === "function" ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
+	return graphemeSegmenterCache;
+};
+var splitGraphemes = (text) => {
+	if (!text) return [];
+	const segmenter = getGraphemeSegmenter();
+	if (segmenter) return [...segmenter.segment(text)].map((segment) => segment.segment);
+	return [...text];
+};
+var commonPrefixLength = (previous, next) => {
+	const limit = Math.min(previous.length, next.length);
+	let index = 0;
+	while (index < limit && previous[index] === next[index]) index += 1;
+	return index;
+};
+var joinGraphemes = (graphemes, count) => graphemes.slice(0, count).join("");
+var delay = (milliseconds, signal) => new Promise((resolve, reject) => {
+	if (signal.aborted) {
+		reject(new DOMException("Aborted", "AbortError"));
+		return;
+	}
+	let timeoutId;
+	const onAbort = () => {
+		window.clearTimeout(timeoutId);
+		reject(new DOMException("Aborted", "AbortError"));
+	};
+	timeoutId = window.setTimeout(() => {
+		signal.removeEventListener("abort", onAbort);
+		resolve();
+	}, milliseconds);
+	signal.addEventListener("abort", onAbort, { once: true });
+});
+var runTypewriterAnimation = async ({ texts, loop, typeDelay, deleteDelay, pause, delay: initialDelay, reducedMotion, onPhraseComplete, signal, ...nodes }) => {
+	if (texts.length === 0) return;
+	const display = { node: nodes.textNode };
+	const ghost = nodes.ghostTextNode ? { node: nodes.ghostTextNode } : null;
+	const writeDisplayText = (value) => {
+		display.node.data = value;
+	};
+	const writeGhostText = (value) => {
+		if (ghost) ghost.node.data = value;
+	};
+	const setGhostText = (text) => {
+		writeGhostText(text);
+	};
+	const typeSuffix = async (graphemes, fromIndex) => {
+		for (let graphemeIndex = fromIndex + 1; graphemeIndex <= graphemes.length; graphemeIndex += 1) {
+			await delay(typeDelay, signal);
+			writeDisplayText(joinGraphemes(graphemes, graphemeIndex));
+		}
+	};
+	const deleteSuffix = async (graphemes, keepCount) => {
+		for (let graphemeIndex = graphemes.length - 1; graphemeIndex >= keepCount; graphemeIndex -= 1) {
+			await delay(deleteDelay, signal);
+			writeDisplayText(joinGraphemes(graphemes, graphemeIndex));
+		}
+	};
+	const getUpcomingGraphemes = (phraseIndex) => {
+		return splitGraphemes(texts[loop ? (phraseIndex + 1) % texts.length : phraseIndex + 1] ?? "");
+	};
+	try {
+		if (reducedMotion) {
+			const finalText = texts.at(-1) ?? "";
+			setGhostText(finalText);
+			writeDisplayText(finalText);
+			onPhraseComplete(finalText);
+			return;
+		}
+		await delay(initialDelay, signal);
+		let currentGraphemes = [];
+		do
+			for (let phraseIndex = 0; phraseIndex < texts.length; phraseIndex += 1) {
+				const text = texts[phraseIndex] ?? "";
+				const phraseGraphemes = splitGraphemes(text);
+				const isLastPhrase = phraseIndex === texts.length - 1;
+				setGhostText(text);
+				await typeSuffix(phraseGraphemes, commonPrefixLength(currentGraphemes, phraseGraphemes) - 1);
+				currentGraphemes = phraseGraphemes;
+				onPhraseComplete(text);
+				if (!loop && isLastPhrase) return;
+				await delay(pause, signal);
+				const upcomingGraphemes = getUpcomingGraphemes(phraseIndex);
+				const keepCount = commonPrefixLength(currentGraphemes, upcomingGraphemes);
+				await deleteSuffix(currentGraphemes, keepCount);
+				currentGraphemes = currentGraphemes.slice(0, keepCount);
+			}
+		while (loop);
+	} catch {}
+};
+//#endregion
+export { commonPrefixLength, resolveTextsKey, runTypewriterAnimation, splitGraphemes, splitTextsKey };

package/dist/index.js

@@ -1,41 +1,51 @@
+import { Accordion } from "./components/accordion/accordion.js";
 import { Avatar } from "./components/avatar/avatar.js";
 import { AvatarGroup } from "./components/avatar-group/avatar-group.js";
+import { Bleed } from "./components/bleed/bleed.js";
+import { Spinner } from "./components/spinner/spinner.js";
+import { Button } from "./components/button/button.js";
+import { Text } from "./components/text/text.js";
+import { Checkbox } from "./components/checkbox/checkbox.js";
+import { CheckboxGroup } from "./components/checkbox/checkbox-group.js";
 import { Stack } from "./components/stack/stack.js";
 import { Chip } from "./components/chip/chip.js";
+import { ClampText } from "./components/clamp-text/clamp-text.js";
 import { DialogClose } from "./components/dialog/dialog-close.js";
 import { DialogIndent } from "./components/dialog/dialog-indent.js";
 import { DialogIndentBackground } from "./components/dialog/dialog-indent-background.js";
 import { DialogSheet } from "./components/dialog/dialog-sheet.js";
 import { DialogTrigger } from "./components/dialog/dialog-trigger.js";
 import { Dialog } from "./components/dialog/dialog.js";
-import { ClampText } from "./components/clamp-text/clamp-text.js";
 import { ELEVATION_DEFAULTS } from "./core/elevation/elevation-types.js";
 import { getElevationProps } from "./core/elevation/get-elevation-props.js";
 import { Elevator } from "./components/elevator/elevator.js";
-import { Spinner } from "./components/spinner/spinner.js";
-import { Button } from "./components/button/button.js";
+import { Fieldset } from "./components/fieldset/fieldset.js";
+import { Icon } from "./components/icon/icon.js";
 import { IconButton } from "./components/icon-button/icon-button.js";
-import { Text } from "./components/text/text.js";
 import { LinearProgress } from "./components/linear-progress/linear-progress.js";
 import { Masonry } from "./components/masonry/masonry.js";
-import { Textfield } from "./components/textfield/textfield.js";
-import { Textarea } from "./components/textarea/textarea.js";
-import { Slider } from "./components/slider/slider.js";
-import { Switch } from "./components/switch/switch.js";
-import { Checkbox } from "./components/checkbox/checkbox.js";
-import { CheckboxGroup } from "./components/checkbox/checkbox-group.js";
-import { Fieldset } from "./components/fieldset/fieldset.js";
+import { Meter } from "./components/meter/meter.js";
+import { PopoverSheet } from "./components/popover/popover-sheet.js";
+import { Popover, PopoverClose, PopoverDescription, PopoverTitle, PopoverTrigger } from "./components/popover/popover.js";
+import { ProgressiveBlur } from "./components/progressive-blur/progressive-blur.js";
 import { Radio } from "./components/radio/radio.js";
 import { RadioGroup } from "./components/radio/radio-group.js";
 import { Select } from "./components/select/select.js";
 import { Separator } from "./components/separator/separator.js";
 import { Shimmer } from "./components/shimmer/shimmer.js";
-import { Icon } from "./components/icon/icon.js";
 import { Skeleton } from "./components/skeleton/skeleton.js";
+import { Slider } from "./components/slider/slider.js";
+import { StaticNoise } from "./components/static-noise/static-noise.js";
 import { Surface } from "./components/surface/surface.js";
+import { Switch } from "./components/switch/switch.js";
 import { Tabs } from "./components/tabs/tabs.js";
-import { Toast } from "./components/toast/toast.js";
-import { StaticNoise } from "./components/static-noise/static-noise.js";
-import { ProgressiveBlur } from "./components/progressive-blur/progressive-blur.js";
+import { Textarea } from "./components/textarea/textarea.js";
+import { Textfield } from "./components/textfield/textfield.js";
 import { Title } from "./components/title/title.js";
-export { Avatar, AvatarGroup, Button, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, Icon, IconButton, LinearProgress, Masonry, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, getElevationProps };
+import { Toast } from "./components/toast/toast.js";
+import { ToggleButton } from "./components/toggle-button/toggle-button.js";
+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, Avatar, AvatarGroup, Bleed, Button, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, Icon, IconButton, 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/dist/preflight-surface.json

@@ -5,7 +5,12 @@
     {
       "id": "themes",
       "file": "themes.css",
-      "purpose": "Runtime color-scheme hints for light and dark mode."
+      "purpose": "Runtime color-scheme hints for light, dark, and inverted mode."
+    },
+    {
+      "id": "core",
+      "file": "core.css",
+      "purpose": "Root baseline, --is-light-theme registration, and global element defaults."
     },
     {
       "id": "typography",
@@ -27,12 +32,13 @@
     {
       "name": "data-theme",
       "module": "themes",
-      "values": ["light", "dark"],
+      "values": ["light", "dark", "inverted"],
       "presence": "value required",
-      "effect": "Narrows color-scheme on the element subtree: light forces light, dark forces dark.",
+      "effect": "Narrows color-scheme on the element subtree: light forces light, dark forces dark, inverted flips color-scheme relative to the active theme using --is-light-theme on the root container.",
       "whenToUse": [
         "Toggle runtime light or dark mode on html, body, or a layout wrapper",
-        "Scope a subtree to one mode while the rest of the page stays unchanged"
+        "Scope a subtree to one mode while the rest of the page stays unchanged",
+        "Invert color-scheme on a nested surface that must contrast the active theme, for example a primary Chip addon inside a primary Button"
       ],
       "whenNotToUse": [
         "As a substitute for loading compatible theme CSS",
@@ -117,6 +123,13 @@
     }
   ],
   "customProperties": [
+    {
+      "name": "--is-light-theme",
+      "module": "themes",
+      "setBy": "html root in core.css from contrast-color(var(--global-background))",
+      "default": "black",
+      "purpose": "Registers the active theme polarity for @container root queries; data-theme=\"inverted\" flips color-scheme against this value."
+    },
     {
       "name": "--shadow-color",
       "module": "elevations",

package/dist/preflight.css

@@ -1 +1 @@
-@layer viraui.preflight;@layer viraui.preflight{html{--scrollbar-thumb:light-dark(var(--base-4),var(--base-3));--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);font-size:100%;box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal}*{@container root not style(--corner-shape-enable: initial){corner-shape:var(--corner-shape-squircle)}}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}:focus-visible{outline:var(--outline);outline-offset:var(--outline-offset)}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-medium);font-optical-sizing:auto;font-family:var(--font-family-body),sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums}::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg:not([fill]){fill:currentcolor}ol ul,ul ol{font-size:medium}table{border-spacing:0;inline-size:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table :is(td,th){border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}fieldset{padding:0;margin:0;border:0}[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px #0000;--shadow-color:oklab(0 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}}@layer viraui.preflight{[data-elevation]:where([data-elevation-direction=bottom],[data-elevation-direction=right]){--shadow-direction:1}[data-elevation]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-direction:-1}[data-elevation-hover="0"]:hover,[data-elevation="0"]{--y1:0px;--x1:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),0 0 0 color-mix(in oklch,var(--shadow-color),#0000 calc(94% - var(--shadow-opacity-factor))),0 0 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation-hover="2"]:hover,[data-elevation-hover="3"]:hover,[data-elevation-hover="4"]:hover,[data-elevation="1"],[data-elevation="2"],[data-elevation="3"],[data-elevation="4"]{box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) var(--shadow-blur-1) oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) var(--shadow-blur-2) oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) var(--shadow-blur-3) oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) var(--shadow-blur-4) oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:2px;--y3:4px;--y4:7px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:1px;--shadow-blur-2:2px;--shadow-blur-3:2px;--shadow-blur-4:3px}[data-elevation-hover="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:0px;--x2:2px;--x3:4px;--x4:7px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:1px;--y2:5px;--y3:11px;--y4:19px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:3px;--shadow-blur-2:5px;--shadow-blur-3:6px;--shadow-blur-4:8px}[data-elevation-hover="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]):hover,[data-elevation="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-blur-3:7px}[data-elevation-hover="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:1px;--x2:5px;--x3:11px;--x4:19px}[data-elevation-hover="2"]:where([data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=right]){--shadow-blur-3:6px}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:4px;--shadow-blur-2:7px;--shadow-blur-3:10px;--shadow-blur-4:12px}[data-elevation-hover="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:2px;--x2:7px;--x3:16px;--x4:29px}[data-elevation-hover="3"]:where([data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=right]){--x2:10px;--x3:22px;--x4:39px;--shadow-blur-1:5px;--shadow-blur-2:10px;--shadow-blur-3:13px;--shadow-blur-4:15px}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:8px;--shadow-blur-2:14px;--shadow-blur-3:20px;--shadow-blur-4:23px}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=left]):hover,[data-elevation="4"]:where([data-elevation-direction=left]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:15px;--x3:33px;--x4:58px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:14px;--x3:33px;--x4:58px}}@layer viraui.preflight{[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}}@layer viraui.preflight{:where(p){line-height:1.5;min-block-size:.01vh;font-size:var(--font-scale-body-medium)}small{font-size:.7em}b,strong{font-variation-settings:"wght" 700}:where(a:any-link):not([data-no-link-style]){text-decoration:none;color:var(--global-interactive-text);word-break:break-word;&:not([class]){background:linear-gradient(currentcolor,currentcolor) no-repeat 0 100%;background-size:0 1px;transition:background-size var(--duration-fast) var(--easing-entrance);&:focus,&:hover{background-size:100% 1px}}}del{padding:0 .4em;margin:0 .2em;background-color:oklab(from var(--highlight-red) l a b/12%);color:var(--highlight-red);box-shadow:0 0 0 1px oklab(from var(--highlight-red) l a b/50%);border-radius:var(--radius-small)}ins{background-color:oklab(from var(--highlight-green) l a b/15%);color:var(--highlight-green);box-shadow:0 0 0 1px oklab(from var(--highlight-green) l a b/50%)}ins,mark{padding:0 .4em;margin:0 .2em;text-decoration:none;border-radius:var(--radius-small)}mark{background-color:oklab(from var(--highlight-yellow) l a b/15%);color:var(--highlight-yellow);box-shadow:0 0 0 1px oklab(from var(--highlight-yellow) l a b/50%)}address{font-style:normal;line-height:inherit}dt{font-variation-settings:"wght" 600}dd{margin:0;padding:0}ul{font-size:medium;padding-left:1rem;& li::marker{font-size:inherit;text-align:right;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);color:oklab(from currentColor l a b/80%)}}ol{font-size:medium;& li::marker{font-size:inherit;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-small);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em;font-size:1em;font-family:var(--font-family-mono);vertical-align:top}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}}@layer viraui.preflight{}@layer viraui.preflight{@container root not style(--vibrancy-enable: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px))}}}
+@layer viraui.preflight;@layer viraui.preflight{@property --scrollbar-thumb{syntax:"<color>";initial-value:#0000;inherits:true}@property --scrollbar-track{syntax:"<color>";initial-value:#0000;inherits:true}@property --outline-offset{syntax:"<length>";initial-value:2px;inherits:true}@property --outline-color{syntax:"<color>";initial-value:currentcolor;inherits:true}@property --outline{syntax:"*";initial-value:2px solid currentcolor;inherits:true}@property --is-light-theme{syntax:"<color>";initial-value:#000;inherits:true}}@layer viraui.preflight{html{--scrollbar-thumb:oklab(from var(--global-contrast) l a b/0.3);--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);--is-light-theme:contrast-color(var(--global-background));font-size:100%;box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal}*{@container root not style(--corner-shape-enable: initial){corner-shape:var(--corner-shape-squircle)}}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}:focus-visible{outline:var(--outline);outline-offset:var(--outline-offset)}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-medium);font-optical-sizing:auto;font-family:var(--font-family-body),system-ui,sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums}::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg:not([fill]){fill:currentcolor}ol ul,ul ol{font-size:medium}table{border-spacing:0;inline-size:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table :is(td,th){border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}button,fieldset{padding:0;margin:0;border:0}button{appearance:none;background:none;font-size:inherit;font-family:inherit;display:inline-flex;cursor:pointer;color:inherit}[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px #0000;--shadow-color:oklab(0 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}}@layer viraui.preflight{[data-elevation]:where([data-elevation-direction=bottom],[data-elevation-direction=right]){--shadow-direction:1}[data-elevation]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-direction:-1}[data-elevation-hover="0"]:hover,[data-elevation="0"]{--y1:0px;--x1:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),0 0 0 color-mix(in oklch,var(--shadow-color),#0000 calc(94% - var(--shadow-opacity-factor))),0 0 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation-hover="2"]:hover,[data-elevation-hover="3"]:hover,[data-elevation-hover="4"]:hover,[data-elevation="1"],[data-elevation="2"],[data-elevation="3"],[data-elevation="4"]{box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) var(--shadow-blur-1) oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) var(--shadow-blur-2) oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) var(--shadow-blur-3) oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) var(--shadow-blur-4) oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:2px;--y3:4px;--y4:7px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:1px;--shadow-blur-2:2px;--shadow-blur-3:2px;--shadow-blur-4:3px}[data-elevation-hover="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:0px;--x2:2px;--x3:4px;--x4:7px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:1px;--y2:5px;--y3:11px;--y4:19px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:3px;--shadow-blur-2:5px;--shadow-blur-3:6px;--shadow-blur-4:8px}[data-elevation-hover="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]):hover,[data-elevation="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-blur-3:7px}[data-elevation-hover="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:1px;--x2:5px;--x3:11px;--x4:19px}[data-elevation-hover="2"]:where([data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=right]){--shadow-blur-3:6px}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:4px;--shadow-blur-2:7px;--shadow-blur-3:10px;--shadow-blur-4:12px}[data-elevation-hover="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:2px;--x2:7px;--x3:16px;--x4:29px}[data-elevation-hover="3"]:where([data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=right]){--x2:10px;--x3:22px;--x4:39px;--shadow-blur-1:5px;--shadow-blur-2:10px;--shadow-blur-3:13px;--shadow-blur-4:15px}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:8px;--shadow-blur-2:14px;--shadow-blur-3:20px;--shadow-blur-4:23px}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=left]):hover,[data-elevation="4"]:where([data-elevation-direction=left]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:15px;--x3:33px;--x4:58px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:14px;--x3:33px;--x4:58px}}@layer viraui.preflight{[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}}@layer viraui.preflight{:where(p){line-height:1.5;min-block-size:.01vh;font-size:var(--font-scale-body-medium)}small{font-size:.7em}b,strong{font-variation-settings:"wght" 700}:where(a:any-link):not([data-no-link-style]){text-decoration:none;color:var(--global-interactive-text);word-break:break-word;&:not([class]){background:linear-gradient(currentcolor,currentcolor) no-repeat 0 100%;background-size:0 1px;transition:background-size var(--duration-fast) var(--easing-entrance);&:focus,&:hover{background-size:100% 1px}}}del{padding:0 .4em;margin:0 .2em;background-color:oklab(from var(--highlight-red) l a b/12%);color:var(--highlight-red);box-shadow:0 0 0 1px oklab(from var(--highlight-red) l a b/50%);border-radius:var(--radius-small)}ins{background-color:oklab(from var(--highlight-green) l a b/15%);color:var(--highlight-green);box-shadow:0 0 0 1px oklab(from var(--highlight-green) l a b/50%)}ins,mark{padding:0 .4em;margin:0 .2em;text-decoration:none;border-radius:var(--radius-small)}mark{background-color:oklab(from var(--highlight-yellow) l a b/15%);color:var(--highlight-yellow);box-shadow:0 0 0 1px oklab(from var(--highlight-yellow) l a b/50%)}address{font-style:normal;line-height:inherit}dt{font-variation-settings:"wght" 600}dd{margin:0;padding:0}ul{font-size:medium;padding-left:1rem;& li::marker{font-size:inherit;text-align:right;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);color:oklab(from currentColor l a b/80%)}}ol{font-size:medium;& li::marker{font-size:inherit;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-small);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em;font-size:1em;font-family:var(--font-family-mono);vertical-align:top}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}}@layer viraui.preflight{[data-theme=inverted]{@container root style(--is-light-theme: black){color-scheme:dark}@container root style(--is-light-theme: white){color-scheme:light}}}@layer viraui.preflight{@container root not style(--vibrancy-enable: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%);@container root style(--is-light-theme: black){backdrop-filter:brightness(100%) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%)}}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "private": false,
   "files": [
     "dist"
@@ -34,15 +34,15 @@
   },
   "devDependencies": {
     "@base-ui/react": "1.6.0",
-    "postcss": "8.5.6",
+    "postcss": "8.5.19",
     "postcss-cli": "11.0.1",
     "react": ">=19.2.7",
     "react-dom": ">=19.2.7",
     "svger-cli": "4.0.8",
-    "vite": "8.0.16",
-    "vite-plugin-dts": "4.5.4",
-    "vite-plugin-static-copy": "2.3.0",
-    "@viraui/foundation": "0.0.25",
+    "unplugin-dts": "1.0.3",
+    "vite": "8.1.4",
+    "vite-plugin-static-copy": "4.1.1",
+    "@viraui/foundation": "0.0.27",
     "@viraui/icons": "0.0.15",
     "@viraui/postcss-config": "0.0.17",
     "@viraui/tsconfig": "0.0.17"