@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/components/index.js

@@ -1,6 +1,134 @@
-export { Accordion, AdvancedSearchBox, Alert, AnimatedCard, 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, DataTableRowActions, DatePicker, DateRangePicker, DateTimePicker, DeviceIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DonutChart, DynamicList, FileInput, FileUpload, FiltersBar, 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-LUESSJAF.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-ALCWXFUC.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-Z4776NRY.js';
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Collapsible, CollapsibleContent, CollapsibleTrigger, Separator, Skeleton, buttonVariants, useIsMobile } from '../chunk-XNLCVHBC.js';
-import '../chunk-VU4CZ76T.js';
-import '../chunk-TRTQSARU.js';
+import { PRESET_GRADIENT_BACKDROP, PRESET_GRADIENT_FRAME, VARIANTS, VARIANT_GRADIENT_BACKDROP_BASE, VARIANT_GRADIENT_DURATION_CLASS, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS, VARIANT_GRADIENT_TRANSITION_DURATION_MS, arbitraryGradientBackgroundImage, resolveVariantStyles } from "../utils/variant.js";
+import { Accordion } from "./accordion/accordion.js";
+import Avatar from "./avatar/avatar.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "../core/animate-ui/components/radix/dropdown-menu.js";
+import { LIST_CLASS_NAMES } from "./list/list.props.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../core/collapsible.js";
+import List from "./list/list.js";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../core/card.js";
+import { SimpleCard } from "./cards/simple-card.js";
+import { BasicDetailsCard } from "./cards/basic-details-card.js";
+import { illustrationRegistry, illustrationsById, parseSvgViewBoxAspectRatio } from "./illustration/illustration-registry.js";
+import { Illustration } from "./illustration/illustration.js";
+import NoDataCard from "./cards/no-data-card/no-data-card.js";
+import { CollapsibleCard } from "./cards/collapsible-card.js";
+import { buttonVariants } from "../core/button.js";
+import { Tooltip as Tooltip$1, TooltipContent, TooltipProvider, TooltipTrigger } from "../core/animate-ui/components/animate/tooltip.js";
+import Tooltip from "./tooltip/tooltip.js";
+import { Button } from "./button/button.js";
+import { InvertButton } from "./button/invert-button.js";
+import { FlashButton } from "./button/flash-button.js";
+import { CopyButton } from "../core/animate-ui/components/buttons/copy.js";
+import { SectionCard } from "./cards/section-card.js";
+import { LottieAnimationContainer } from "./lottie-animation-container/lottie-animation-container.js";
+import { animatedCardAnimations, animatedCardTypeKeys } from "./cards/animated-card/animated-card-animations.js";
+import { AnimatedCard } from "./cards/animated-card/animated-card.js";
+import { ScrollArea, ScrollBar } from "../core/scroll-area.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../core/popover.js";
+import { ListDetails } from "./list-details/list-details.js";
+import Menu from "./menu/menu.js";
+import { useIsMobile } from "../core/hooks/use-mobile.js";
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "../core/animate-ui/components/radix/sheet.js";
+import { NavBar } from "./nav-bar/nav-bar.js";
+import { Input } from "../core/input/input.js";
+import { InputPassword } from "../core/input/input-password.js";
+import { Separator } from "../core/separator.js";
+import { Skeleton } from "../core/skeleton.js";
+import { Sidebar as Sidebar$1, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from "../core/animate-ui/components/radix/sidebar.js";
+import { isSidebarGroup } from "./sidebar/types.js";
+import Sidebar from "./sidebar/sidebar.js";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "../core/select.js";
+import { Tabs, TabsContent, TabsContents, TabsList, TabsTrigger } from "../core/animate-ui/components/animate/tabs.js";
+import { ScrollableSections } from "./scrollable-sections/scrollable-sections.js";
+import { Label } from "../core/label.js";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from "../core/form.js";
+import { IconAvatar } from "./icon-avatar/icon-avatar.js";
+import { TYPOGRAPHY_VARIANTS, typographyDefaultElement, typographyVariantClasses } from "./typography/typography-variants.js";
+import { Typography } from "./typography/typography.js";
+import { FileUpload } from "./file-upload/file-upload.js";
+import { FileInput } from "./file-input/file-input.js";
+import { Checkbox } from "../core/checkbox/motion-checkbox.js";
+import { Switch } from "../core/animate-ui/components/radix/switch.js";
+import { ToggleGroup, ToggleGroupItem } from "../core/animate-ui/components/radix/toggle-group.js";
+import { RadioGroup } from "./radio-group/radio-group.js";
+import { SelectableCardList } from "./selectable-card-list/selectable-card-list.js";
+import { StatusCardList } from "./status-card-list/status-card-list.js";
+import { VerticalStepper } from "./vertical-stepper/vertical-stepper.js";
+import { Badge, badgeVariants } from "../core/badge.js";
+import { Spinner } from "./spinner/spinner.js";
+import { StatCard } from "./stat-card/stat-card.js";
+import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from "../core/button-group.js";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from "./chart/chart.js";
+import { CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, DEFAULT_CHART_SERIES_COLORS, buildSeriesChartConfig, getChartSeriesColor } from "./chart/chart-colors.js";
+import { BarChart } from "./chart/bar-chart.js";
+import { AreaChart } from "./chart/area-chart.js";
+import { LineChart } from "./chart/line-chart.js";
+import { ComposedChart } from "./chart/composed-chart.js";
+import { DonutChart } from "./chart/donut-chart.js";
+import { TreemapChart } from "./chart/treemap-chart.js";
+import { InputOTP, InputOTPSeparator } from "../core/input-otp/input-otp.js";
+import { Carousel } from "./carousel/carousel.js";
+import { Textarea } from "../core/textarea/textarea.js";
+import { AsyncCombobox } from "../core/combobox/combobox.js";
+import { AsyncMultiSelect } from "./async-multi-select/async-multi-select.js";
+import { Calendar, CalendarDayButton } from "./calendar/calendar.js";
+import { DatePicker } from "./date-picker/date-picker.js";
+import { TimePicker } from "./time-picker/time-picker.js";
+import { DateTimePicker } from "./date-time-picker/date-time-picker.js";
+import { PRESET_IDS, PRESET_LABELS, ROLLING_PRESET_IDS, computeDateRange } from "./date-range-picker/presets.js";
+import { DateRangePicker } from "./date-range-picker/date-range-picker.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../core/breadcrumb.js";
+import { SimplifiedDate } from "./simplified-date/simplified-date.js";
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "../core/table.js";
+import { Link } from "./link/link.js";
+import SearchBox from "./search-box/search-box.js";
+import FiltersBar from "./filters-bar/filters-bar.js";
+import AdvancedSearchBox from "./advanced-search-box/advanced-search-box.js";
+import { TogglableItemsList } from "./togglable-items-list/togglable-items-list.js";
+import { Pagination } from "./pagination/pagination.js";
+import { DEFAULT_PAGE_SIZE_OPTIONS } from "./pagination/pagination.props.js";
+import { CopiableText } from "./copiable-text/copiable-text.js";
+import { TableSkeleton } from "./skeletons/table-skeleton.js";
+import { DataTable } from "./data-table/data-table.js";
+import { DataTableRowActions } from "./data-table/row-actions.js";
+import { DeviceIcon } from "./device-icon/device-icon.js";
+import { userTypeBadgeRegistry, userTypeBadgeUserTypes } from "./user-type-badge/user-type-badge.registry.js";
+import { UserTypeBadge, userTypeBadgeSizeVariants } from "./user-type-badge/user-type-badge.js";
+import { StatusBadge, statusBadgeSizeVariants } from "./status-badge/status-badge.js";
+import { Tag } from "./tag/tag.js";
+import { TagInput } from "./tag-input/tag-input.js";
+import { TransferList } from "./transfer-list/transfer-list.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "../core/animate-ui/components/radix/dialog.js";
+import { IconTextActionCard } from "./icon-text-action-card/icon-text-action-card.js";
+import { Alert } from "./alert/alert.js";
+import { ConfirmationDialog } from "./confirmation-dialog/confirmation-dialog.js";
+import { PreviewCard, PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger } from "../core/animate-ui/components/base/preview-card.js";
+import { Code } from "../core/animate-ui/components/animate/code.js";
+import { MonospaceContent } from "./monospace-content/monospace-content.js";
+import { SimpleList } from "./simple-list/simple-list.js";
+import { DynamicList } from "./dynamic-list/dynamic-list.js";
+import { KeyValueManager } from "./key-value-manager/key-value-manager.js";
+import { RequirementList } from "./requirement-list/requirement-list.js";
+import { SimplePaginatedList } from "./simple-paginated-list/simple-paginated-list.js";
+import { Toast, Toaster, toast } from "./toast/toast.js";
+import { MarkdownContent } from "./markdown-content/markdown-content.js";
+import { OverflowBadgeList } from "./overflow-badge-list/overflow-badge-list.js";
+import { PopCollectionItem } from "./animated-containers/pop-collection-item.js";
+import { FullscreenDialog } from "./fullscreen-dialog/fullscreen-dialog.js";
+import { VerificationInProgress } from "./lottie-animations/verification-in-progress/verification-in-progress.js";
+import { CircularProgress } from "./circular-progress/circular-progress.js";
+import { ProgressBar } from "./progress-bar/progress-bar.js";
+import { FullSizeError } from "./error-display/full-size-error/full-size-error.js";
+import { InlineError } from "./error-display/inline-error/inline-error.js";
+import { SimpleClickableCard } from "./simple-clickable-card/simple-clickable-card.js";
+import { SimpleInfoCard } from "./simple-info-card/simple-info-card.js";
+import { GlitchText } from "./text-effects/glitch-effect/glitch-text.js";
+import { GradientText } from "./text-effects/gradient-text/gradient-text.js";
+import { HighlightText } from "./text-effects/highlight-text/highlight-text.js";
+import { ShimmeringText } from "./text-effects/shimmer-text/shimmer-text.js";
+import { parseTextMarkup } from "./text-effects/parse-text-markup.js";
+import { CodeEditor } from "./code-editor/code-editor.js";
+import { ContentContainer } from "./content-container/content-container.js";
+import PageContainer from "./page-container/page-container.js";
+import PageContainerSkeleton from "./page-container/page-container-skeleton.js";
+export { Accordion, AdvancedSearchBox, Alert, AnimatedCard, AreaChart, AsyncCombobox, AsyncMultiSelect, Avatar, Badge, BarChart, BasicDetailsCard, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, Code, CodeEditor, Collapsible, CollapsibleCard, CollapsibleContent, CollapsibleTrigger, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, CopyButton, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DataTableRowActions, DatePicker, DateRangePicker, DateTimePicker, DeviceIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DonutChart, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicList, FileInput, FileUpload, FiltersBar, FlashButton, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, GlitchText, GradientText, HighlightText, IconAvatar, IconTextActionCard, Illustration, InlineError, Input, InputOTP, InputOTPSeparator, InputPassword, InvertButton, KeyValueManager, LIST_CLASS_NAMES, Label, LineChart, Link, List, ListDetails, LottieAnimationContainer, MarkdownContent, Menu, MonospaceContent, NavBar, NoDataCard, OverflowBadgeList, PRESET_GRADIENT_BACKDROP, PRESET_GRADIENT_FRAME, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PreviewCard, PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger, ProgressBar, ROLLING_PRESET_IDS, RadioGroup, RequirementList, ScrollArea, ScrollBar, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, ShimmeringText, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, Sidebar$1 as SidebarPrimitive, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Skeleton, 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, Tooltip, TooltipContent, TooltipProvider, Tooltip$1 as TooltipRoot, TooltipTrigger, TransferList, TreemapChart, Typography, UserTypeBadge, VARIANTS, VARIANT_GRADIENT_BACKDROP_BASE, VARIANT_GRADIENT_DURATION_CLASS, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS, VARIANT_GRADIENT_TRANSITION_DURATION_MS, VerificationInProgress, VerticalStepper, animatedCardAnimations, animatedCardTypeKeys, arbitraryGradientBackgroundImage, badgeVariants, buildSeriesChartConfig, buttonGroupVariants, buttonVariants, computeDateRange, getChartSeriesColor, illustrationRegistry, illustrationsById, isSidebarGroup, parseSvgViewBoxAspectRatio, parseTextMarkup, resolveVariantStyles, statusBadgeSizeVariants, toast, typographyDefaultElement, typographyVariantClasses, useFormField, useIsMobile, useSidebar, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes };

package/dist/components/key-value-manager/key-value-manager-add-popover.js

@@ -0,0 +1,126 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../core/popover.js";
+import { KeyValueManagerField } from "./key-value-manager-field.js";
+import { validateField } from "./key-value-manager.utils.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowRight, Plus } from "lucide-react";
+//#region src/components/key-value-manager/key-value-manager-add-popover.tsx
+function KeyValueManagerAddPopover({ items, meta, labels, maxAllowed, onUpdate, triggerClassName }) {
+	const [open, setOpen] = useState(false);
+	const [draftKey, setDraftKey] = useState("");
+	const [draftValue, setDraftValue] = useState("");
+	const [keyError, setKeyError] = useState(false);
+	const [valueError, setValueError] = useState(false);
+	const [showSuccess, setShowSuccess] = useState(false);
+	const atLimit = maxAllowed !== void 0 && items.length >= maxAllowed;
+	const resetFormState = () => {
+		setDraftKey("");
+		setDraftValue("");
+		setKeyError(false);
+		setValueError(false);
+		setShowSuccess(false);
+	};
+	const handleOpenChange = (nextOpen) => {
+		setOpen(nextOpen);
+		if (!nextOpen) resetFormState();
+	};
+	const handleFieldChange = (field, value) => {
+		setShowSuccess(false);
+		if (field === "key") {
+			setDraftKey(value);
+			if (keyError) setKeyError(false);
+		} else {
+			setDraftValue(value);
+			if (valueError) setValueError(false);
+		}
+	};
+	const handleAdd = () => {
+		setShowSuccess(false);
+		const trimmedKey = draftKey.trim();
+		const trimmedValue = draftValue.trim();
+		const nextKeyError = !trimmedKey || !validateField(trimmedKey, meta?.key);
+		const nextValueError = !trimmedValue || !validateField(trimmedValue, meta?.value);
+		if (nextKeyError || nextValueError) {
+			setKeyError(nextKeyError);
+			setValueError(nextValueError);
+			return;
+		}
+		if (items.some((item) => item.key === trimmedKey)) {
+			setKeyError(true);
+			return;
+		}
+		onUpdate([...items, {
+			key: trimmedKey,
+			value: trimmedValue
+		}]);
+		setDraftKey("");
+		setDraftValue("");
+		setKeyError(false);
+		setValueError(false);
+		setShowSuccess(true);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				color: "primary",
+				fullWidth: false,
+				disabled: atLimit,
+				className: cn("shrink-0 max-sm:size-9 max-sm:gap-0 max-sm:px-0", triggerClassName),
+				startIcon: /* @__PURE__ */ jsx(Plus, {}),
+				children: /* @__PURE__ */ jsx("span", {
+					className: "max-sm:sr-only",
+					children: labels.add
+				})
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			align: "end",
+			className: "w-80 space-y-4",
+			children: [
+				/* @__PURE__ */ jsx(KeyValueManagerField, {
+					field: "key",
+					label: labels.keyLabel,
+					value: draftKey,
+					meta: meta?.key,
+					error: keyError,
+					errorMessage: labels.keyErrorMessage,
+					selectPlaceholder: labels.selectPlaceholder,
+					onChange: (value) => handleFieldChange("key", value)
+				}),
+				/* @__PURE__ */ jsx(KeyValueManagerField, {
+					field: "value",
+					label: labels.valueLabel,
+					value: draftValue,
+					meta: meta?.value,
+					error: valueError,
+					errorMessage: labels.valueErrorMessage,
+					selectPlaceholder: labels.selectPlaceholder,
+					onChange: (value) => handleFieldChange("value", value)
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						color: "primary",
+						fullWidth: false,
+						onClick: handleAdd,
+						endIcon: /* @__PURE__ */ jsx(ArrowRight, {}),
+						children: labels.add
+					}), showSuccess ? /* @__PURE__ */ jsx("p", {
+						className: cn("text-sm text-success"),
+						children: labels.successMessage
+					}) : null]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { KeyValueManagerAddPopover };

package/dist/components/key-value-manager/key-value-manager-field.js

@@ -0,0 +1,47 @@
+"use client";
+import { Input } from "../../core/input/input.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../core/select.js";
+import { Textarea } from "../../core/textarea/textarea.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/key-value-manager/key-value-manager-field.tsx
+/**
+* One field of the add popover: a select when `meta.options` is set, otherwise
+* an input for the key and a textarea for the value.
+*/
+function KeyValueManagerField({ field, label, value, meta, error, errorMessage, selectPlaceholder, onChange }) {
+	const errorContent = error ? errorMessage : void 0;
+	if (meta?.options) return /* @__PURE__ */ jsxs(Select, {
+		value: value || void 0,
+		onValueChange: onChange,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			label,
+			size: "sm",
+			error,
+			errorContent,
+			children: /* @__PURE__ */ jsx(SelectValue, { placeholder: selectPlaceholder })
+		}), /* @__PURE__ */ jsx(SelectContent, { children: meta.options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+			value: option,
+			children: option
+		}, option)) })]
+	}, value ? "selected" : "empty");
+	if (field === "key") return /* @__PURE__ */ jsx(Input, {
+		label,
+		value,
+		charLimit: meta?.maxLength,
+		error,
+		size: "sm",
+		errorContent,
+		onChange: (e) => onChange(e.target.value)
+	});
+	return /* @__PURE__ */ jsx(Textarea, {
+		label,
+		value,
+		charLimit: meta?.maxLength,
+		error,
+		errorContent,
+		onChange: (e) => onChange(e.target.value),
+		size: "sm"
+	});
+}
+//#endregion
+export { KeyValueManagerField };

package/dist/components/key-value-manager/key-value-manager-table.js

@@ -0,0 +1,188 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { BasicDetailsCard } from "../cards/basic-details-card.js";
+import { Button } from "../button/button.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../core/table.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, Trash2 } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
+//#region src/components/key-value-manager/key-value-manager-table.tsx
+var slideTransition = {
+	duration: .15,
+	ease: [
+		.22,
+		1,
+		.36,
+		1
+	]
+};
+var slideVariants = {
+	enter: (dir) => ({
+		x: dir > 0 ? "100%" : "-100%",
+		opacity: 1
+	}),
+	center: {
+		x: 0,
+		opacity: 1
+	},
+	exit: (dir) => ({
+		x: dir > 0 ? "-100%" : "100%",
+		opacity: 1
+	})
+};
+function KeyValueManagerTable({ rows, itemsPerPage = 10, hasSearchQuery, onDelete, keyLabel, valueLabel, actionLabel, emptyItems, emptySearch }) {
+	const [page, setPage] = useState(0);
+	const [direction, setDirection] = useState(1);
+	const pageSize = Math.max(1, itemsPerPage);
+	const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));
+	const showPagination = rows.length > pageSize;
+	const pageRows = rows.slice(page * pageSize, (page + 1) * pageSize);
+	const hasPrev = page > 0;
+	const hasNext = page < totalPages - 1;
+	const noRows = rows.length === 0;
+	useEffect(() => {
+		setPage((current) => Math.min(current, Math.max(0, totalPages - 1)));
+	}, [
+		rows,
+		pageSize,
+		totalPages
+	]);
+	const goPrev = () => {
+		if (!hasPrev || noRows) return;
+		setDirection(-1);
+		setPage((current) => current - 1);
+	};
+	const goNext = () => {
+		if (!hasNext || noRows) return;
+		setDirection(1);
+		setPage((current) => current + 1);
+	};
+	const deleteButton = (item, sourceIndex, className) => /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "ghost",
+		color: "error",
+		size: "icon",
+		fullWidth: false,
+		"aria-label": `Delete ${item.key}`,
+		className,
+		onClick: () => onDelete(sourceIndex),
+		children: /* @__PURE__ */ jsx(Trash2, {
+			className: "h-4 w-4",
+			"aria-hidden": true
+		})
+	});
+	const emptyMessage = hasSearchQuery ? emptySearch : emptyItems;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "overflow-hidden sm:hidden",
+				children: noRows ? /* @__PURE__ */ jsx("p", {
+					className: "py-8 text-center text-sm text-muted-foreground",
+					children: emptyMessage
+				}) : /* @__PURE__ */ jsx(AnimatePresence, {
+					mode: "wait",
+					custom: direction,
+					initial: false,
+					children: /* @__PURE__ */ jsx(motion.ul, {
+						custom: direction,
+						variants: slideVariants,
+						initial: "enter",
+						animate: "center",
+						exit: "exit",
+						transition: slideTransition,
+						className: "divide-y divide-border",
+						children: pageRows.map(({ item, sourceIndex }) => /* @__PURE__ */ jsx("li", {
+							className: "py-3",
+							children: /* @__PURE__ */ jsx(BasicDetailsCard, {
+								primaryText: /* @__PURE__ */ jsx("span", {
+									className: "block truncate",
+									children: item.key
+								}),
+								secondaryText: item.value,
+								action: deleteButton(item, sourceIndex)
+							})
+						}, `${sourceIndex}-${item.key}`))
+					}, page)
+				})
+			}),
+			/* @__PURE__ */ jsxs(Table, {
+				containerClassName: "hidden sm:block",
+				children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+					/* @__PURE__ */ jsx(TableHead, { children: keyLabel }),
+					/* @__PURE__ */ jsx(TableHead, { children: valueLabel }),
+					/* @__PURE__ */ jsx(TableHead, {
+						className: "w-12 text-right",
+						children: actionLabel
+					})
+				] }) }), /* @__PURE__ */ jsx(TableBody, { children: noRows ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+					colSpan: 3,
+					className: "py-8 text-center text-muted-foreground",
+					children: emptyMessage
+				}) }) : /* @__PURE__ */ jsx(AnimatePresence, {
+					mode: "wait",
+					custom: direction,
+					children: /* @__PURE__ */ jsx(motion.tr, {
+						custom: direction,
+						variants: slideVariants,
+						initial: "enter",
+						animate: "center",
+						exit: "exit",
+						transition: slideTransition,
+						className: "contents",
+						children: pageRows.map(({ item, sourceIndex }) => /* @__PURE__ */ jsxs(TableRow, {
+							className: "group",
+							children: [
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "max-w-[200px] truncate font-medium",
+									children: item.key
+								}),
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "max-w-[300px] truncate",
+									children: item.value
+								}),
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "text-right",
+									children: deleteButton(item, sourceIndex, cn("transition-opacity [@media(hover:hover)]:pointer-events-none [@media(hover:hover)]:opacity-0", "group-hover:pointer-events-auto group-hover:opacity-100", "focus-visible:opacity-100"))
+								})
+							]
+						}, `${sourceIndex}-${item.key}`))
+					}, page)
+				}) })]
+			}),
+			showPagination ? /* @__PURE__ */ jsxs("div", {
+				className: "mt-3 flex justify-end gap-1 px-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					color: "primary",
+					size: "icon",
+					fullWidth: false,
+					"aria-label": "Previous page",
+					disabled: noRows || !hasPrev,
+					onClick: goPrev,
+					children: /* @__PURE__ */ jsx(ChevronLeft, {
+						className: "text-primary",
+						"aria-hidden": true
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					color: "primary",
+					size: "icon",
+					fullWidth: false,
+					"aria-label": "Next page",
+					disabled: noRows || !hasNext,
+					onClick: goNext,
+					children: /* @__PURE__ */ jsx(ChevronRight, {
+						className: "text-primary",
+						"aria-hidden": true
+					})
+				})]
+			}) : null
+		]
+	});
+}
+//#endregion
+export { KeyValueManagerTable };

package/dist/components/key-value-manager/key-value-manager.js

@@ -0,0 +1,111 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import SearchBox from "../search-box/search-box.js";
+import { filterKeyValueRows } from "./key-value-manager.utils.js";
+import { KeyValueManagerAddPopover } from "./key-value-manager-add-popover.js";
+import { KeyValueManagerTable } from "./key-value-manager-table.js";
+import { resolveKeyValueManagerLabels } from "./key-value-manager.props.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Search, X } from "lucide-react";
+//#region src/components/key-value-manager/key-value-manager.tsx
+function KeyValueManager({ items, meta, onUpdate, maxAllowed, itemsPerPage = 10, labels: labelsProp, className }) {
+	const labels = resolveKeyValueManagerLabels(labelsProp);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [searchOpen, setSearchOpen] = useState(false);
+	const [searchBoxKey, setSearchBoxKey] = useState(0);
+	const toolbarRef = useRef(null);
+	const searchButtonRef = useRef(null);
+	const returnFocusRef = useRef(false);
+	const searchExpanded = searchOpen || searchQuery !== "";
+	useEffect(() => {
+		if (searchOpen) toolbarRef.current?.querySelector("input")?.focus();
+	}, [searchOpen]);
+	useEffect(() => {
+		if (!searchExpanded && returnFocusRef.current) {
+			returnFocusRef.current = false;
+			searchButtonRef.current?.focus();
+		}
+	}, [searchExpanded]);
+	const closeSearch = () => {
+		returnFocusRef.current = true;
+		setSearchOpen(false);
+		setSearchQuery("");
+		setSearchBoxKey((key) => key + 1);
+	};
+	const filteredRows = useMemo(() => filterKeyValueRows(items, searchQuery), [items, searchQuery]);
+	const handleDelete = (sourceIndex) => {
+		onUpdate(items.filter((_, index) => index !== sourceIndex));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex w-full flex-col gap-4", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: toolbarRef,
+			className: "flex items-center gap-3 max-sm:gap-1",
+			onKeyDown: (e) => {
+				const inToolbar = toolbarRef.current?.contains(e.target);
+				if (e.key === "Escape" && searchOpen && inToolbar) closeSearch();
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", { className: cn("flex-1 sm:hidden", searchExpanded && "hidden") }),
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					color: "primary",
+					size: "icon",
+					fullWidth: false,
+					ref: searchButtonRef,
+					"aria-label": labels.search,
+					className: cn("sm:hidden", searchExpanded && "hidden"),
+					onClick: () => setSearchOpen(true),
+					children: /* @__PURE__ */ jsx(Search, {
+						className: "h-4 w-4",
+						"aria-hidden": true
+					})
+				}),
+				/* @__PURE__ */ jsx(SearchBox, {
+					className: cn("min-w-0 flex-1", !searchExpanded && "max-sm:hidden"),
+					placeholder: labels.search,
+					onSearch: setSearchQuery,
+					onClear: () => setSearchQuery(""),
+					onValueChange: setSearchQuery
+				}, searchBoxKey),
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					color: "gray",
+					size: "icon",
+					fullWidth: false,
+					"aria-label": labels.closeSearch,
+					className: cn("shrink-0 sm:hidden", !searchExpanded && "hidden"),
+					onClick: closeSearch,
+					children: /* @__PURE__ */ jsx(X, {
+						className: "h-4 w-4",
+						"aria-hidden": true
+					})
+				}),
+				/* @__PURE__ */ jsx(KeyValueManagerAddPopover, {
+					items,
+					meta,
+					labels,
+					maxAllowed,
+					onUpdate,
+					triggerClassName: cn(searchExpanded && "max-sm:hidden")
+				})
+			]
+		}), /* @__PURE__ */ jsx(KeyValueManagerTable, {
+			rows: filteredRows,
+			itemsPerPage,
+			hasSearchQuery: searchQuery.trim().length > 0,
+			onDelete: handleDelete,
+			keyLabel: labels.keyLabel,
+			valueLabel: labels.valueLabel,
+			actionLabel: labels.actionLabel,
+			emptyItems: labels.emptyItems,
+			emptySearch: labels.emptySearch
+		})]
+	});
+}
+//#endregion
+export { KeyValueManager };

package/dist/components/key-value-manager/key-value-manager.props.js

@@ -0,0 +1,28 @@
+//#region src/components/key-value-manager/key-value-manager.props.ts
+var STATIC_DEFAULT_LABELS = {
+	add: "Add",
+	closeSearch: "Close search",
+	keyErrorMessage: "Invalid key",
+	valueErrorMessage: "Invalid value",
+	successMessage: "Added successfully",
+	keyLabel: "Key",
+	valueLabel: "Value",
+	actionLabel: "Action",
+	emptyItems: "No items",
+	emptySearch: "No matches",
+	selectPlaceholder: "Select"
+};
+({ ...STATIC_DEFAULT_LABELS }), `${STATIC_DEFAULT_LABELS.keyLabel.toLowerCase()}${STATIC_DEFAULT_LABELS.valueLabel.toLowerCase()}`;
+function resolveKeyValueManagerLabels(labels) {
+	const merged = {
+		...STATIC_DEFAULT_LABELS,
+		...labels
+	};
+	const search = labels?.search ?? `Search ${merged.keyLabel.toLowerCase()} or ${merged.valueLabel.toLowerCase()}`;
+	return {
+		...merged,
+		search
+	};
+}
+//#endregion
+export { resolveKeyValueManagerLabels };