@espressif/dashboard-ui-components 1.4.0 → 1.6.0

package/dist/index.js

@@ -1,9 +1,9 @@
-export { CopyrightCard, PageLoader } from './chunk-CPVDY4CV.js';
-export { Accordion, AdvancedSearchBox, Alert, AnimatedCard, AnimatedRainmakerLogo, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, Carousel, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, Code, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DeviceIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DonutChart, DynamicList, FileInput, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, InputOTP, InputOTPSeparator, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, NavBar, no_data_card_default as NoDataCard, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard, PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger, ProgressBar, RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, StatusBadge, StatusCardList, Switch, TYPOGRAPHY_VARIANTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs, TabsContent, TabsContents, TabsList, TabsTrigger, Tag, TagInput, Textarea, TimePicker, Toast, Toaster, TogglableItemsList, ToggleGroup, ToggleGroupItem, TransferList, TreemapChart, Typography, UserTypeBadge, VerificationInProgress, VerticalStepper, animatedCardAnimations, animatedCardTypeKeys, buildSeriesChartConfig, computeDateRange, getChartSeriesColor, illustrationRegistry, illustrationsById, parseSvgViewBoxAspectRatio, statusBadgeSizeVariants, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes } from './chunk-XMEZ2BP6.js';
-export { Badge, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Label, PRESET_GRADIENT_BACKDROP, PRESET_GRADIENT_FRAME, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, VARIANTS, VARIANT_GRADIENT_BACKDROP_BASE, VARIANT_GRADIENT_DURATION_CLASS, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS, VARIANT_GRADIENT_TRANSITION_DURATION_MS, arbitraryGradientBackgroundImage, badgeVariants, buttonGroupVariants, resolveVariantStyles } from './chunk-KCMVLNM5.js';
-export { AccountMenu, EntryLayout, Footer as WorkspaceFooter, Header as WorkspaceHeader, WorkspaceLayout } from './chunk-RCRU3JW2.js';
-export { AppLogo, FooterCard, MyAccountMenu, ProfileCard } from './chunk-TSNA6BHK.js';
-export { Avatar, Button, CopyButton, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FlashButton, GlitchText, GradientText, HighlightText, Input, InputPassword, InvertButton, LIST_CLASS_NAMES, Link, List, Menu, ScrollArea, ScrollBar, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, ShimmeringText, Sidebar2 as Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, Sidebar as SidebarPrimitive, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, Tooltip as TooltipRoot, TooltipTrigger, isSidebarGroup, parseTextMarkup, useSidebar } from './chunk-UHRNPXO5.js';
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Collapsible, CollapsibleContent, CollapsibleTrigger, Separator, Skeleton, buttonVariants, useControlledState, useIsMobile } from './chunk-7BO76CNB.js';
+export { CopyrightCard, PageLoader } from './chunk-HYSNJBDF.js';
+export { Accordion, AdvancedSearchBox, Alert, AnimatedCard, AnimatedRainmakerLogo, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, Carousel, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, Code, CodeEditor, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DateTimePicker, DeviceIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DonutChart, DynamicList, FileInput, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, InputOTP, InputOTPSeparator, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, NavBar, no_data_card_default as NoDataCard, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard, PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger, ProgressBar, ROLLING_PRESET_IDS, RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, StatusBadge, StatusCardList, Switch, TYPOGRAPHY_VARIANTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs, TabsContent, TabsContents, TabsList, TabsTrigger, Tag, TagInput, Textarea, TimePicker, Toast, Toaster, TogglableItemsList, ToggleGroup, ToggleGroupItem, TransferList, TreemapChart, Typography, UserTypeBadge, VerificationInProgress, VerticalStepper, animatedCardAnimations, animatedCardTypeKeys, buildSeriesChartConfig, computeDateRange, getChartSeriesColor, illustrationRegistry, illustrationsById, parseSvgViewBoxAspectRatio, statusBadgeSizeVariants, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes } from './chunk-IYMCZTJ5.js';
+export { Badge, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Label, PRESET_GRADIENT_BACKDROP, PRESET_GRADIENT_FRAME, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, VARIANTS, VARIANT_GRADIENT_BACKDROP_BASE, VARIANT_GRADIENT_DURATION_CLASS, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS, VARIANT_GRADIENT_TRANSITION_DURATION_MS, arbitraryGradientBackgroundImage, badgeVariants, buttonGroupVariants, resolveVariantStyles } from './chunk-ABBHGIFI.js';
+export { AccountMenu, EntryLayout, Footer as WorkspaceFooter, Header as WorkspaceHeader, WorkspaceLayout } from './chunk-6RJAKSPV.js';
+export { AppLogo, FooterCard, MyAccountMenu, ProfileCard } from './chunk-45DCL46L.js';
+export { Avatar, Button, CopyButton, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FlashButton, GlitchText, GradientText, HighlightText, Input, InputPassword, InvertButton, LIST_CLASS_NAMES, Link, List, Menu, ScrollArea, ScrollBar, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, ShimmeringText, Sidebar2 as Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, Sidebar as SidebarPrimitive, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, Tooltip as TooltipRoot, TooltipTrigger, isSidebarGroup, parseTextMarkup, useSidebar } from './chunk-ZEQNTNMW.js';
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Collapsible, CollapsibleContent, CollapsibleTrigger, Separator, Skeleton, buttonVariants, useControlledState, useIsMobile } from './chunk-OKB2WTX7.js';
 export { cn } from './chunk-VU4CZ76T.js';
 import './chunk-TRTQSARU.js';

package/dist/layouts/index.js

@@ -1,6 +1,6 @@
-export { AccountMenu, EntryLayout, Footer as WorkspaceFooter, Header as WorkspaceHeader, WorkspaceLayout } from '../chunk-RCRU3JW2.js';
-import '../chunk-TSNA6BHK.js';
-export { isSidebarGroup } from '../chunk-UHRNPXO5.js';
-import '../chunk-7BO76CNB.js';
+export { AccountMenu, EntryLayout, Footer as WorkspaceFooter, Header as WorkspaceHeader, WorkspaceLayout } from '../chunk-6RJAKSPV.js';
+import '../chunk-45DCL46L.js';
+export { isSidebarGroup } from '../chunk-ZEQNTNMW.js';
+import '../chunk-OKB2WTX7.js';
 import '../chunk-VU4CZ76T.js';
 import '../chunk-TRTQSARU.js';

package/dist/use-controlled-state-BL9NoHu8.d.ts

@@ -0,0 +1,19 @@
+interface CommonControlledStateProps<T> {
+    value?: T;
+    defaultValue?: T;
+}
+/**
+ * Controlled / uncontrolled state pair with React's usual semantics: while
+ * `value` is defined the hook reports exactly that value and the setter only
+ * notifies `onChange`; the owner decides whether the change takes effect.
+ * Without `value` the hook owns the state, seeded from `defaultValue`.
+ *
+ * The internal copy still tracks a controlled `value` so a component that
+ * later drops `value` keeps the last controlled state instead of snapping
+ * back to `defaultValue`.
+ */
+declare function useControlledState<T, Rest extends any[] = []>(props: CommonControlledStateProps<T> & {
+    onChange?: (value: T, ...args: Rest) => void;
+}): readonly [T, (next: T, ...args: Rest) => void];
+
+export { useControlledState as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@espressif/dashboard-ui-components",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "Reusable React UI components, page layouts, and utilities — Espressif's dashboard design system.",
   "keywords": [
     "react",

package/src/assets/illustrations/rm-data-download.svg

@@ -1,68 +1,208 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg id="rm-data-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 845.67 533.92">
+  <!--
+    RainMaker cloud (taken from the product logo) raining data into a laptop.
+
+    One source, two variants (see illustration-variants.ts):
+    - static: every SMIL element is stripped and `data-variant="animated"`
+      groups are dropped, so the base attribute values below ARE the resting
+      frame (rows visible, progress two thirds full, two records in flight).
+    - animated: `data-variant="static"` groups are dropped; `<set>` elements
+      hide what the animations then bring in, so nothing flashes before its
+      first `begin`.
+    Variant groups must not contain nested <g> elements: the selector is a
+    non-greedy regex up to the first closing tag.
+
+    Theme colours come from the design tokens; the cloud keeps the logo's own
+    reds on purpose. Ids are prefixed "rmdd-" because the markup is inlined.
+  -->
   <defs>
     <style>
-      .st0 {
-        fill: var(--color-destructive);
-      }
+      .rmdd-card { fill: var(--color-card); }
+      .rmdd-muted { fill: var(--color-muted); }
+      .rmdd-muted-fg { fill: var(--color-muted-foreground); }
+      .rmdd-gray { fill: var(--color-gray); }
+      .rmdd-primary { fill: var(--color-primary); }
+      .rmdd-primary-light { fill: var(--color-primary-light); }
+      .rmdd-flow { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 9 9; opacity: .55; }
+      .rmdd-pkt-frame { fill: var(--color-card); stroke: var(--color-primary); stroke-width: 2.5; }
+    </style>
 
-      .st1 {
-        fill: var(--color-error-light);
-      }
+    <linearGradient id="rmdd-cloud" x1=".83" y1="92.99" x2="512.02" y2="92.99" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#fc4c3b"/>
+      <stop offset=".5" stop-color="#d43129"/>
+      <stop offset="1" stop-color="#f94939"/>
+    </linearGradient>
+    <linearGradient id="rmdd-cloud-top" x1="340.71" y1="86.7" x2="166.21" y2="-87.76" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#d43129"/>
+      <stop offset="1" stop-color="#f94939"/>
+    </linearGradient>
+    <linearGradient id="rmdd-cloud-band" x1="43.64" y1="194.71" x2="364.07" y2="194.71" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#d43129"/>
+      <stop offset="1" stop-color="#f94939"/>
+    </linearGradient>
+    <linearGradient id="rmdd-cloud-sweep" x1="377.59" y1="200.5" x2="479.34" y2="200.5" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#f94939"/>
+      <stop offset="1" stop-color="#d43129"/>
+    </linearGradient>
+    <linearGradient id="rmdd-dot" x1="130.74" y1="157.26" x2="95.26" y2="121.82" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#d43129"/>
+      <stop offset=".17" stop-color="#dd372d"/>
+      <stop offset=".67" stop-color="#f14436"/>
+      <stop offset="1" stop-color="#f94939"/>
+    </linearGradient>
+    <linearGradient id="rmdd-drop" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#fc4c3b"/>
+      <stop offset=".57" stop-color="#eb3b30"/>
+      <stop offset="1" stop-color="#e5352c"/>
+    </linearGradient>
 
-      .st2 {
-        fill: var(--color-gray);
-      }
+    <!-- The three rain dashes of the logo, reused for the static logo and the falling copies. -->
+    <g id="rmdd-rain">
+      <path fill="url(#rmdd-drop)" d="M295.41,420.01c-12.31,0-22.29-9.99-22.29-22.31,0-5.3,1.89-10.43,5.34-14.46l46.37-54.33c7.99-9.37,22.07-10.49,31.44-2.5s10.49,22.07,2.5,31.44h0l-46.37,54.33c-4.24,4.97-10.46,7.83-16.99,7.82h0Z"/>
+      <path fill="url(#rmdd-drop)" d="M195.75,420.01c-5.3,0-10.42-1.89-14.43-5.35-9.37-7.95-10.52-21.99-2.57-31.36.02-.02.03-.04.05-.06l46.42-54.33c7.75-9.57,21.79-11.05,31.36-3.3s11.05,21.79,3.3,31.36c-.24.3-.5.6-.76.89l-46.37,54.33c-4.24,4.97-10.46,7.83-16.99,7.82h0Z"/>
+      <path fill="url(#rmdd-drop)" d="M96.14,420.01c-12.31,0-22.29-9.99-22.29-22.31,0-5.3,1.89-10.43,5.34-14.46l46.37-54.33c7.75-9.57,21.79-11.05,31.36-3.3s11.05,21.79,3.3,31.36c-.24.3-.5.6-.76.89l-46.37,54.33c-4.22,4.98-10.42,7.84-16.95,7.82h0Z"/>
+    </g>
+
+    <!-- One exported record travelling from the cloud to the laptop. -->
+    <g id="rmdd-packet">
+      <rect class="rmdd-pkt-frame" x="-31" y="-13" width="62" height="26" rx="7"/>
+      <rect class="rmdd-primary" x="-22" y="-5" width="12" height="5" rx="2.5"/>
+      <rect class="rmdd-muted-fg" x="-6" y="-5" width="27" height="5" rx="2.5"/>
+      <rect class="rmdd-muted-fg" x="-22" y="3" width="17" height="4" rx="2" opacity=".6"/>
+      <rect class="rmdd-muted-fg" x="0" y="3" width="15" height="4" rx="2" opacity=".6"/>
+    </g>
 
-      .st3 {
-        fill: var(--color-muted-foreground);
-      }
+    <path id="rmdd-flow-path" d="M338 178 C 440 178, 462 402, 560 402"/>
+  </defs>
 
-      .st4 {
-        fill: var(--color-card);
-      }
+  <!-- Ground -->
+  <ellipse class="rmdd-muted" cx="440" cy="526" rx="380" ry="7.5"/>
 
-      .st5 {
-        fill: var(--color-muted);
-      }
+  <!-- RainMaker cloud, straight from the logo (viewBox 512 x 420), scaled down. -->
+  <g transform="translate(48 30) scale(0.58)">
+    <!-- Falling copies of the logo's rain, emitted continuously. -->
+    <g data-variant="animated" opacity=".55">
+      <use href="#rmdd-rain">
+        <animateTransform attributeName="transform" type="translate" values="0 0; 0 160" dur="2.4s" begin="0s" repeatCount="indefinite"/>
+        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.12;.5;1" dur="2.4s" begin="0s" repeatCount="indefinite"/>
+      </use>
+      <use href="#rmdd-rain">
+        <animateTransform attributeName="transform" type="translate" values="0 0; 0 160" dur="2.4s" begin="1.2s" repeatCount="indefinite"/>
+        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.12;.5;1" dur="2.4s" begin="1.2s" repeatCount="indefinite"/>
+      </use>
+    </g>
 
-      .st6 {
-        fill: var(--color-muted);
-      }
-    </style>
-  </defs>
-  <g id="rm-logo">
-    <circle class="st0" cx="196.56" cy="204.3" r="8.88"/>
-    <path class="st1" d="M206.56,482.35l.39-240.76c-3.35.03-6.71.05-10.06.05-1.91,0-3.82-.02-5.72-.03l-.4,241.55c5.35-.32,10.79-.62,15.78-.81Z"/>
-    <path class="st1" d="M241.83,422.44l.39-178.97c-3.35.02-6.71.03-10.06.03-1.91,0-3.82-.02-5.72-.02l-.4,179.56c5.35-.24,10.79-.46,15.78-.6Z"/>
-    <path class="st1" d="M277.03,361.96l.39-121.75c-3.35.01-6.71.02-10.06.02-1.91,0-3.82-.01-5.72-.02l-.4,122.15c5.35-.16,10.79-.31,15.78-.41Z"/>
-    <path class="st1" d="M547.53,361.77l-286.28-.39c.03,3.35.05,6.71.05,10.06,0,1.91-.03,3.82-.04,5.72l287.22.4c-.38-5.35-.74-10.79-.96-15.78Z"/>
-    <path class="st1" d="M547.41,422.43l-321.36-.39c.04,3.35.06,6.71.06,10.06,0,1.91-.03,3.82-.04,5.72l322.42.4c-.43-5.35-.83-10.79-1.08-15.78Z"/>
-    <path class="st1" d="M547.29,482.55l-356.63-.39c.04,3.35.07,6.71.07,10.06,0,1.91-.03,3.82-.04,5.72l357.81.4c-.48-5.35-.92-10.79-1.2-15.78Z"/>
-    <path class="st0" d="M1.45,3c1.93,0,1.93-3,0-3S-.48,3,1.45,3h0Z"/>
-    <path class="st0" d="M298.29,165.07h0c-.87-28.76-24.91-51.37-53.67-50.49-27.38.84-49.44,22.73-50.48,50.11h0c-21.89,1.16-38.69,19.85-37.53,41.74,1.13,21.33,18.94,37.93,40.3,37.58h71.35c3.73-.3,7.11,2.19,7.94,5.85h0l7.35-8.63h0c1.26-1.48,1.93-3.37,1.88-5.31-.17-4.31-3.73-7.72-8.05-7.69h-80.57c-13.21.4-24.24-9.97-24.64-23.18-.4-13.21,9.97-24.24,23.18-24.64.39-.01.79-.01,1.18,0,1.44,0,2.87.13,4.29.39,2.07.38,4.22-.09,5.94-1.31,2.55-1.68,3.9-4.67,3.48-7.69-.24-1.7-.37-3.41-.37-5.12,0-20.06,16.26-36.32,36.32-36.32s36.32,16.26,36.32,36.32v1.54h0c-14.54,6.23-24.01,20.5-24.09,36.32-.04,4.39,3.47,7.99,7.86,8.06,4.36.02,7.9-3.5,7.92-7.86v-.03c-.05-13.21,10.62-23.96,23.83-24.02,13.21-.05,23.96,10.62,24.02,23.83.02,6.03-2.23,11.84-6.31,16.28l-.11.14-23.49,27.09c-2.86,3.29-2.52,8.28.77,11.14s8.28,2.52,11.14-.77h0l23.46-26.95c14.71-16.26,13.47-41.37-2.79-56.08-7.25-6.56-16.66-10.22-26.44-10.27h0s0-.01,0-.01Z"/>
+    <use href="#rmdd-rain"/>
+    <circle fill="url(#rmdd-dot)" cx="113" cy="253.55" r="25.08">
+      <animate attributeName="r" values="25.08;27.5;25.08" dur="2.4s" repeatCount="indefinite"/>
+    </circle>
+    <path fill="url(#rmdd-cloud)" d="M400.41,142.72h0C397.94,61.46,330.05-2.41,248.79.07,171.43,2.43,109.11,64.29,106.18,141.63h0C44.34,144.92-3.13,197.72.16,259.56c3.2,60.25,53.51,107.16,113.84,106.16h201.58c10.54-.84,20.1,6.2,22.43,16.52h0l20.77-24.38h0c3.57-4.17,5.45-9.51,5.3-14.99-.47-12.19-10.53-21.81-22.73-21.73H113.74c-37.31,1.14-68.47-28.18-69.61-65.49s28.18-68.47,65.49-69.61c1.11-.03,2.23-.04,3.34-.02,4.07,0,8.12.37,12.13,1.09,5.86,1.08,11.91-.25,16.78-3.69,7.2-4.74,11.02-13.2,9.82-21.73-.69-4.79-1.04-9.63-1.04-14.47,0-56.67,45.94-102.61,102.61-102.61s102.61,45.94,102.61,102.61v4.35h0c-41.09,17.61-67.82,57.91-68.06,102.61-.1,12.4,9.81,22.56,22.21,22.77,12.31.05,22.33-9.9,22.38-22.21v-.09c-.15-37.32,29.99-67.7,67.32-67.85,37.32-.15,67.7,29.99,67.85,67.32.07,17.03-6.3,33.45-17.82,45.99l-.3.39-66.37,76.54c-8.09,9.29-7.12,23.38,2.17,31.47s23.38,7.12,31.47-2.17h0l66.28-76.14c41.57-45.93,38.04-116.87-7.89-158.44-20.48-18.53-47.07-28.86-74.69-29.01h0v-.03Z"/>
+    <path fill="url(#rmdd-cloud-top)" d="M253.21,20.42c71.54-.01,133.13,50.5,147.12,120.65C396.84,59.85,328.17-3.17,246.95.31c-76.06,3.26-137.08,63.98-140.73,140.02,14.27-69.82,75.72-119.95,146.99-119.91Z"/>
+    <path fill="url(#rmdd-cloud-band)" d="M358.78,357.9h0c7.97-9.42,6.79-23.51-2.62-31.48-4.02-3.4-9.11-5.27-14.37-5.29H113c-37.3-.02-67.53-30.24-67.58-67.54,0-6.2.86-12.37,2.52-18.34,0,0-43.46,130.38,145.86,130.38h121.69c10.56-.84,20.12,6.22,22.43,16.56l20.86-24.3h0Z"/>
+    <path fill="url(#rmdd-cloud-sweep)" d="M454.44,215.04c18.93,25.91,17,61.56-4.61,85.27l-.3.39-66.45,76.32c-8.09,9.29-7.12,23.38,2.17,31.47s23.38,7.12,31.47-2.17h0l17.38-19.99h0c88.14-101.83,20.34-171.28,20.34-171.28h0Z"/>
   </g>
-  <g id="body">
-    <rect id="bezel" class="st3" x="526.77" y="310.15" width="296.41" height="203.65" rx="29.36" ry="29.36"/>
-    <g id="base">
-      <path id="base-2" class="st2" d="M504.29,513.81h341.38c0,11.1-9.01,20.11-20.11,20.11h-301.15c-11.1,0-20.11-9.01-20.11-20.11h0Z"/>
-      <path id="trackpad" class="st5" d="M649.88,513.81h50.2v.15c0,2.95-2.4,5.35-5.35,5.35h-39.51c-2.95,0-5.35-2.4-5.35-5.35v-.15h0Z"/>
+
+  <!-- Connector: dashes flow from the cloud towards the laptop. -->
+  <use href="#rmdd-flow-path" class="rmdd-flow">
+    <animate attributeName="stroke-dashoffset" from="0" to="-18" dur="0.9s" repeatCount="indefinite"/>
+  </use>
+
+  <!-- Laptop -->
+  <g id="rmdd-laptop">
+    <rect class="rmdd-muted-fg" x="526.77" y="310.15" width="296.41" height="203.65" rx="29.36"/>
+    <path class="rmdd-gray" d="M504.29,513.81h341.38c0,11.1-9.01,20.11-20.11,20.11h-301.15c-11.1,0-20.11-9.01-20.11-20.11h0Z"/>
+    <path class="rmdd-muted" d="M649.88,513.81h50.2v.15c0,2.95-2.4,5.35-5.35,5.35h-39.51c-2.95,0-5.35-2.4-5.35-5.35v-.15h0Z"/>
+    <circle class="rmdd-card" cx="674.98" cy="318.61" r="3.7"/>
+
+    <rect class="rmdd-card" x="539.84" y="327.23" width="270.27" height="169.5"/>
+    <rect class="rmdd-primary" x="539.84" y="327.23" width="270.27" height="17.44"/>
+    <circle class="rmdd-card" cx="551" cy="335.95" r="2.6" opacity=".85"/>
+    <circle class="rmdd-card" cx="560" cy="335.95" r="2.6" opacity=".85"/>
+    <circle class="rmdd-card" cx="569" cy="335.95" r="2.6" opacity=".85"/>
+
+    <!-- Table header -->
+    <rect class="rmdd-muted" x="551" y="355" width="248" height="16" rx="3"/>
+    <rect class="rmdd-muted-fg" x="558" y="361" width="34" height="4" rx="2"/>
+    <rect class="rmdd-muted-fg" x="606" y="361" width="58" height="4" rx="2"/>
+    <rect class="rmdd-muted-fg" x="682" y="361" width="42" height="4" rx="2"/>
+    <rect class="rmdd-muted-fg" x="746" y="361" width="30" height="4" rx="2"/>
+
+    <!--
+      Rows: visible in the static frame. When animated, `set` hides them from
+      t=0 and each lights up as a packet arrives (packet k lands at 3s + 1.5s * k).
+    -->
+    <g>
+      <rect class="rmdd-primary-light" x="551" y="378" width="248" height="16" rx="3" opacity=".45"/>
+      <rect class="rmdd-primary" x="558" y="384" width="34" height="4" rx="2"/>
+      <rect class="rmdd-muted-fg" x="606" y="384" width="50" height="4" rx="2"/>
+      <rect class="rmdd-muted-fg" x="682" y="384" width="36" height="4" rx="2"/>
+      <rect class="rmdd-muted-fg" x="746" y="384" width="24" height="4" rx="2"/>
+      <set attributeName="opacity" to="0" begin="0s" dur="indefinite"/>
+      <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.06;.82;1" dur="4.5s" begin="3s" repeatCount="indefinite"/>
     </g>
-    <g id="top">
-      <g id="screen-content">
-        <rect id="screen" class="st4" x="539.84" y="327.23" width="270.27" height="169.5"/>
-        <g id="app">
-          <rect id="header" class="st3" x="539.84" y="327.23" width="270.27" height="17.44"/>
-          <g id="table">
-            <rect class="st6" x="549.32" y="419.94" width="250.49" height="11.81"/>
-            <rect class="st6" x="549.32" y="442.43" width="250.49" height="9.31"/>
-            <rect class="st6" x="549.32" y="398.14" width="250.49" height="11.81"/>
-            <rect class="st6" x="549.32" y="373.58" width="250.49" height="11.81"/>
-            <rect class="st6" x="549.73" y="463.97" width="250.49" height="11.81"/>
-          </g>
-        </g>
+    <g>
+      <rect class="rmdd-primary-light" x="551" y="400" width="248" height="16" rx="3" opacity=".45"/>
+      <rect class="rmdd-primary" x="558" y="406" width="34" height="4" rx="2"/>
+      <rect class="rmdd-muted-fg" x="606" y="406" width="44" height="4" rx="2"/>
+      <rect class="rmdd-muted-fg" x="682" y="406" width="40" height="4" rx="2"/>
+      <rect class="rmdd-muted-fg" x="746" y="406" width="18" height="4" rx="2"/>
+      <set attributeName="opacity" to="0" begin="0s" dur="indefinite"/>
+      <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.06;.82;1" dur="4.5s" begin="4.5s" repeatCount="indefinite"/>
+    </g>
+    <g>
+      <rect class="rmdd-primary-light" x="551" y="422" width="248" height="16" rx="3" opacity=".45"/>
+      <rect class="rmdd-primary" x="558" y="428" width="34" height="4" rx="2"/>
+      <rect class="rmdd-muted-fg" x="606" y="428" width="56" height="4" rx="2"/>
+      <rect class="rmdd-muted-fg" x="682" y="428" width="30" height="4" rx="2"/>
+      <rect class="rmdd-muted-fg" x="746" y="428" width="28" height="4" rx="2"/>
+      <set attributeName="opacity" to="0" begin="0s" dur="indefinite"/>
+      <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.06;.82;1" dur="4.5s" begin="6s" repeatCount="indefinite"/>
+    </g>
+
+    <!-- Download progress: two thirds full at rest, filling over the cycle when animated. -->
+    <rect class="rmdd-muted" x="551" y="470" width="248" height="8" rx="4"/>
+    <rect class="rmdd-primary" x="551" y="470" width="168" height="8" rx="4">
+      <animate attributeName="width" values="0;248;248" keyTimes="0;.92;1" dur="4.5s" repeatCount="indefinite"/>
+    </rect>
+
+    <!-- Download badge -->
+    <g transform="translate(786 452)">
+      <circle class="rmdd-primary" r="11"/>
+      <g fill="none" stroke="var(--color-primary-foreground)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M0 -5.5 V3.5"/>
+        <path d="M-3.8 0 L0 3.8 L3.8 0"/>
+        <path d="M-5 6.5 H5"/>
+        <animateTransform attributeName="transform" type="translate" values="0 -1.2; 0 1.2; 0 -1.2" dur="1.2s" repeatCount="indefinite"/>
       </g>
-      <circle id="cam" class="st4" cx="674.98" cy="318.61" r="3.7"/>
     </g>
   </g>
+
+  <!-- Static frame: two records frozen part-way along the connector. -->
+  <g data-variant="static">
+    <use href="#rmdd-packet" x="422" y="241"/>
+    <use href="#rmdd-packet" x="492" y="359"/>
+  </g>
+
+  <!-- Animated: three records in flight, arriving 1.5s apart. -->
+  <g data-variant="animated">
+    <use href="#rmdd-packet" opacity="0">
+      <animateMotion dur="4.5s" begin="0s" repeatCount="indefinite" keyPoints="0;1;1" keyTimes="0;.667;1" calcMode="linear">
+        <mpath href="#rmdd-flow-path"/>
+      </animateMotion>
+      <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;.06;.6;.667;1" dur="4.5s" begin="0s" repeatCount="indefinite"/>
+    </use>
+    <use href="#rmdd-packet" opacity="0">
+      <animateMotion dur="4.5s" begin="1.5s" repeatCount="indefinite" keyPoints="0;1;1" keyTimes="0;.667;1" calcMode="linear">
+        <mpath href="#rmdd-flow-path"/>
+      </animateMotion>
+      <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;.06;.6;.667;1" dur="4.5s" begin="1.5s" repeatCount="indefinite"/>
+    </use>
+    <use href="#rmdd-packet" opacity="0">
+      <animateMotion dur="4.5s" begin="3s" repeatCount="indefinite" keyPoints="0;1;1" keyTimes="0;.667;1" calcMode="linear">
+        <mpath href="#rmdd-flow-path"/>
+      </animateMotion>
+      <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;.06;.6;.667;1" dur="4.5s" begin="3s" repeatCount="indefinite"/>
+    </use>
+  </g>
 </svg>

package/src/styles/colors.css

@@ -98,7 +98,8 @@
   /* ─── Border & Input ─── */
   --color-border: #e1e1e1;
   --color-input: #e1e1e1;
-  --color-ring: #0053c2;
+  /* Follows primary so a theme that re-colours primary gets matching focus rings. */
+  --color-ring: var(--color-primary);
 
   /* ─── MD3 Surface Hierarchy ─── */
   --color-surface: #f8f8f8;
@@ -238,7 +239,7 @@
   /* Border & Input */
   --color-border: #292929;
   --color-input: #292929;
-  --color-ring: #7cd9ff;
+  --color-ring: var(--color-primary);
 
   /* MD3 Surface Hierarchy */
   --color-surface: #0b0b0b;

package/dist/use-controlled-state-Demn-VNO.d.ts

@@ -1,9 +0,0 @@
-interface CommonControlledStateProps<T> {
-    value?: T;
-    defaultValue?: T;
-}
-declare function useControlledState<T, Rest extends any[] = []>(props: CommonControlledStateProps<T> & {
-    onChange?: (value: T, ...args: Rest) => void;
-}): readonly [T, (next: T, ...args: Rest) => void];
-
-export { useControlledState as u };