@cognite/aura 0.3.3 → 0.3.5

package/dist/components/ui/core/segmented-control/segmented-control.js

@@ -1,50 +1,92 @@
 import { cn as e } from "../../../../lib/utils.js";
-import { createContext as t, useContext as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { cva as a } from "class-variance-authority";
-import { Tabs as o } from "@base-ui/react/tabs";
+import { createContext as t, useContext as n, useLayoutEffect as r, useRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { cva as s } from "class-variance-authority";
+import { Tabs as c } from "@base-ui/react/tabs";
 //#region libs/aura/src/components/ui/core/segmented-control/segmented-control.tsx
-function s({ className: t, ...n }) {
-	return /* @__PURE__ */ r(o.Root, {
+function l({ className: t, ...n }) {
+	return /* @__PURE__ */ a(c.Root, {
 		"data-slot": "segmented-control",
 		className: e("flex flex-col gap-2", t),
 		...n
 	});
 }
-var c = a("bg-muted-background text-muted-foreground relative isolate inline-flex w-fit items-center justify-center gap-2 p-0.5", {
+var u = s("bg-muted-background text-muted-foreground relative isolate inline-flex w-fit items-center justify-center gap-2 p-0.5", {
 	variants: { size: {
 		default: "h-9 rounded-lg",
 		small: "h-7 rounded-md"
 	} },
 	defaultVariants: { size: "default" }
-}), l = t(void 0);
-function u({ className: t, size: n, children: a, ...s }) {
-	let u = n ?? "default";
-	return /* @__PURE__ */ r(o.List, {
+}), d = t(void 0);
+function f(e) {
+	let t = n(d);
+	return e ?? t ?? "default";
+}
+function p({ className: t, size: n, children: r, ...i }) {
+	let s = n ?? "default";
+	return /* @__PURE__ */ a(c.List, {
 		"data-slot": "segmented-control-list",
-		className: e(c({ size: n }), t),
-		...s,
-		children: /* @__PURE__ */ i(l.Provider, {
-			value: u,
-			children: [/* @__PURE__ */ r(f, { size: u }), a]
+		className: e(u({ size: n }), t),
+		...i,
+		children: /* @__PURE__ */ o(d.Provider, {
+			value: s,
+			children: [/* @__PURE__ */ a(h, {
+				size: s,
+				activeSelector: "[aria-selected=\"true\"]"
+			}), r]
 		})
 	});
 }
-var d = a("bg-background pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) -z-0 h-(--active-tab-height) w-(--active-tab-width) motion-safe:transition-[top,left,width,height] motion-safe:duration-200 motion-safe:ease-out data-[activation-direction=none]:transition-none", {
+var m = s("bg-background pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) -z-0 h-(--active-tab-height) w-(--active-tab-width) motion-safe:transition-[top,left,width,height] motion-safe:duration-200 motion-safe:ease-out data-[activation-direction=none]:transition-none", {
 	variants: { size: {
 		default: "rounded-md",
 		small: "rounded-sm"
 	} },
 	defaultVariants: { size: "default" }
 });
-function f({ className: t, size: n, ...i }) {
-	return /* @__PURE__ */ r(o.Indicator, {
+function h({ className: t, size: n, activeSelector: o = "[aria-selected=\"true\"],[data-active]", style: s, ...c }) {
+	let l = i(null), u = i(null);
+	return r(() => {
+		let e = l.current, t = e?.parentElement;
+		if (!e || !t) return;
+		let n = null, r = /* @__PURE__ */ new Set(), i = (e) => {
+			r.add(e), s.observe(e);
+		}, a = (r = !1) => {
+			let a = t.querySelector(o);
+			if (!a) {
+				e.style.opacity = "0";
+				return;
+			}
+			a !== n && (n && s.unobserve(n), i(a), n = a);
+			let c = a.offsetLeft, l = u.current, d = r || l === null || c === l ? "none" : c > l ? "right" : "left";
+			e.dataset.activationDirection = d, e.style.opacity = "1", e.style.setProperty("--active-tab-left", `${c}px`), e.style.setProperty("--active-tab-top", `${a.offsetTop}px`), e.style.setProperty("--active-tab-width", `${a.offsetWidth}px`), e.style.setProperty("--active-tab-height", `${a.offsetHeight}px`), u.current = c;
+		}, s = new ResizeObserver((e) => {
+			e.some((e) => r.has(e.target) ? (r.delete(e.target), !1) : !0) && a(!0);
+		});
+		i(t), a();
+		let c = new MutationObserver(() => a(!1));
+		return c.observe(t, {
+			attributes: !0,
+			attributeFilter: [
+				"aria-selected",
+				"data-active",
+				"class"
+			],
+			subtree: !0,
+			childList: !0
+		}), () => {
+			c.disconnect(), s.disconnect();
+		};
+	}, [o]), /* @__PURE__ */ a("div", {
+		ref: l,
 		"data-slot": "segmented-control-indicator",
-		className: e(d({ size: n }), t),
-		...i
+		"data-activation-direction": "none",
+		className: e("opacity-0", m({ size: n }), t),
+		style: s,
+		...c
 	});
 }
-var p = a("text-sm leading-4.5 tracking-normal font-medium relative z-10 inline-flex flex-1 items-center justify-center whitespace-nowrap text-muted-foreground dark:text-muted-foreground border border-transparent transition-[color,box-shadow] duration-200 ease-out focus-visible:border-ring focus-visible:ring focus-visible:ring-ring-shadow focus-visible:outline-1 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 data-disabled:pointer-events-none data-disabled:opacity-50 hover:text-foreground data-active:text-foreground data-active:hover:text-foreground", {
+var g = s("text-sm leading-4.5 tracking-normal font-medium relative z-10 inline-flex flex-1 items-center justify-center whitespace-nowrap text-muted-foreground dark:text-muted-foreground border border-transparent transition-[color,box-shadow] duration-200 ease-out focus-visible:border-ring focus-visible:ring focus-visible:ring-ring-shadow focus-visible:outline-1 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 data-disabled:pointer-events-none data-disabled:opacity-50 hover:text-foreground data-active:text-foreground data-active:hover:text-foreground", {
 	variants: {
 		size: {
 			default: "rounded-md",
@@ -93,23 +135,23 @@ var p = a("text-sm leading-4.5 tracking-normal font-medium relative z-10 inline-
 		tabContent: "icon-label"
 	}
 });
-function m({ className: t, size: i, tabContent: a, ...s }) {
-	let c = n(l), u = i ?? c;
-	return /* @__PURE__ */ r(o.Tab, {
+function _({ className: t, size: n, tabContent: r, ...i }) {
+	let o = f(n);
+	return /* @__PURE__ */ a(c.Tab, {
 		"data-slot": "segmented-control-trigger",
-		className: e(p({
-			size: u,
-			tabContent: a
+		className: e(g({
+			size: o,
+			tabContent: r
 		}), t),
-		...s
+		...i
 	});
 }
-function h({ className: t, ...n }) {
-	return /* @__PURE__ */ r(o.Panel, {
+function v({ className: t, ...n }) {
+	return /* @__PURE__ */ a(c.Panel, {
 		"data-slot": "segmented-control-content",
 		className: e("flex-1 outline-none", t),
 		...n
 	});
 }
 //#endregion
-export { s as SegmentedControl, m as SegmentedControlButton, h as SegmentedControlContent, u as SegmentedControlList, p as segmentedControlButtonVariants, c as segmentedControlListVariants };
+export { l as SegmentedControl, _ as SegmentedControlButton, v as SegmentedControlContent, h as SegmentedControlIndicator, p as SegmentedControlList, g as segmentedControlButtonVariants, m as segmentedControlIndicatorVariants, u as segmentedControlListVariants };

package/dist/components/ui/core/slider/slider.d.ts

@@ -0,0 +1,9 @@
+import { ComponentRef, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+type SliderProps = Omit<SliderPrimitive.Root.Props<readonly number[]>, 'value' | 'defaultValue' | 'onValueChange'> & {
+    value?: number[];
+    defaultValue?: number[];
+    onValueChange?: (value: number[]) => void;
+};
+declare const Slider: ForwardRefExoticComponent<Omit<SliderProps, 'ref'> & RefAttributes<ComponentRef<typeof SliderPrimitive.Root>>>;
+export { Slider };

package/dist/components/ui/core/slider/slider.js

@@ -0,0 +1,40 @@
+import { cn as e } from "../../../../lib/utils.js";
+import { forwardRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Slider as i } from "@base-ui/react/slider";
+//#region libs/aura/src/components/ui/core/slider/slider.tsx
+var a = t(({ className: t, defaultValue: a, value: o, min: s = 0, max: c = 100, onValueChange: l, ...u }, d) => {
+	let f = Array.isArray(o) ? o : Array.isArray(a) ? a : [s];
+	return /* @__PURE__ */ n(i.Root, {
+		ref: d,
+		"data-slot": "slider",
+		"data-range": f.length > 1 ? "" : void 0,
+		defaultValue: a,
+		value: o,
+		min: s,
+		max: c,
+		className: e("group/slider data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full", t),
+		thumbAlignment: "edge",
+		onValueChange: (e) => {
+			l && l(Array.isArray(e) ? [...e] : [e]);
+		},
+		...u,
+		children: /* @__PURE__ */ r(i.Control, {
+			className: "relative flex w-full touch-none items-center select-none data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+			children: [/* @__PURE__ */ n(i.Track, {
+				"data-slot": "slider-track",
+				className: "relative z-0 grow overflow-hidden rounded-full bg-transparent ring-1 ring-border-emphasized ring-inset data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3",
+				children: /* @__PURE__ */ n(i.Indicator, {
+					"data-slot": "slider-range",
+					className: e("relative z-10 bg-transparent select-none", "after:absolute after:rounded-full after:bg-secondary-background", "group-data-[range]/slider:after:rounded-none", "group-data-[range]/slider:group-data-[orientation=horizontal]/slider:after:left-0", "group-data-[range]/slider:group-data-[orientation=vertical]/slider:after:bottom-0", "group-data-[disabled]/slider:after:bg-disabled-background", "group-data-[orientation=horizontal]/slider:after:inset-e-0 group-data-[orientation=horizontal]/slider:after:left-0.5 group-data-[orientation=horizontal]/slider:after:top-1/2 group-data-[orientation=horizontal]/slider:after:h-2 group-data-[orientation=horizontal]/slider:after:-translate-y-1/2", "group-data-[orientation=vertical]/slider:after:inset-bs-0 group-data-[orientation=vertical]/slider:after:bottom-0.5 group-data-[orientation=vertical]/slider:after:left-1/2 group-data-[orientation=vertical]/slider:after:w-2 group-data-[orientation=vertical]/slider:after:-translate-x-1/2")
+				})
+			}), f.map((t, r) => /* @__PURE__ */ n(i.Thumb, {
+				"data-slot": "slider-thumb",
+				className: e("relative block size-3 shrink-0 rounded-full outline-none", "before:absolute before:top-1/2 before:left-1/2 before:size-2 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-foreground before:transition-[width,height]", "hover:before:size-3", "focus-visible:before:size-3 focus-visible:ring-ring-muted focus-visible:ring-4", "active:before:size-3", "data-disabled:pointer-events-none data-disabled:before:bg-disabled-foreground")
+			}, r))]
+		})
+	});
+});
+a.displayName = "Slider";
+//#endregion
+export { a as Slider };

package/dist/index.d.ts

@@ -1 +1 @@
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionToolbar, ActionToolbarAction, ActionToolbarActionClear, ActionToolbarActions, ActionToolbarPrimaryAction, ActionToolbarSelection, ActionToolbarSelectionSummary, Alert, AlertActions, AlertButton, AlertClose, AlertDescription, AlertTitle, EmptyState, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, Avatar, AvatarFallback, AvatarIcon, AvatarImage, Badge, Banner, BannerAction, BannerActions, BannerClose, BannerIcon, BannerStatus, BannerTitle, badgeVariants, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, buttonVariants, Card, CardActions, CardContent, CardDescription, CardFooter, CardFooterEnd, CardFooterStart, CardHeader, CardHeaderCenter, CardHeaderEnd, CardHeaderStart, CardTitle, CheckboxGroup, CheckboxItem, CheckboxItemControl, CheckboxItemDescription, CheckboxItemLabel, CheckboxMetadata, CodeBlock, CodeBlockCollapseButton, CodeBlockCopyButton, CodeBlockDownloadButton, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Count, countVariants, DateRangePicker, DateTimeRangePicker, type DateRangePickerProps, type DateTimeRangePickerProps, type ShortcutItem, type TimeFormat, type ComponentMeta, type ComponentStatusType, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSectionLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, HelperText, HoverCard, HoverCardContent, HoverCardTrigger, InlineCitation, InlineCitationCard, InlineCitationCardBody, InlineCitationCardTrigger, InlineCitationGroup, InlineCitationLink, type InlineCitationLinkProps, InlineCitationQuote, InlineCitationSource, InlineCitationText, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Kbd, KbdGroup, Label, Loader, Message, MessageAction, MessageActions, MessageContent, MessageResponse, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious, PaginationResultsPerPage, PaginationResultsPerPageLabel, PaginationSelectTrigger, PaginationStatus, PaginationTeleport, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverHeaderContent, PopoverSlot, PopoverTitle, PopoverTrigger, PortalContainerContext, PromptInput, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputModelSelect, PromptInputModelSelectContent, PromptInputModelSelectItem, PromptInputModelSelectTrigger, PromptInputModelSelectValue, PromptInputProvider, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, Reasoning, ReasoningContent, ReasoningHeader, ReasoningItem, RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemDescription, RadioGroupItemLabel, ScrollArea, ScrollBar, Search, SegmentedControl, SegmentedControlButton, SegmentedControlContent, SegmentedControlList, segmentedControlButtonVariants, segmentedControlListVariants, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Shimmer, Skeleton, Source, Sources, SourcesTitle, toast, Toaster, Tabs, TabsLabel, TabsList, TabsPanel, TabsTrigger, tabsListVariants, tabsTriggerVariants, Textarea, Topbar, TopbarAction, TopbarBreadcrumbs, TopbarCenter, TopbarIcon, TopbarLeft, TopbarMetadata, TopbarRight, type TopbarTheme, TopbarThemeSwitcher, Toggle, toggleVariants, Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, usePromptInputController, } from './components';
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionToolbar, ActionToolbarAction, ActionToolbarActionClear, ActionToolbarActions, ActionToolbarPrimaryAction, ActionToolbarSelection, ActionToolbarSelectionSummary, Alert, AlertActions, AlertButton, AlertClose, AlertDescription, AlertTitle, EmptyState, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, Avatar, AvatarFallback, AvatarIcon, AvatarImage, Badge, Banner, BannerAction, BannerActions, BannerClose, BannerIcon, BannerStatus, BannerTitle, badgeVariants, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, buttonVariants, Card, CardActions, CardContent, CardDescription, CardFooter, CardFooterEnd, CardFooterStart, CardHeader, CardHeaderCenter, CardHeaderEnd, CardHeaderStart, CardTitle, CheckboxGroup, CheckboxItem, CheckboxItemControl, CheckboxItemDescription, CheckboxItemLabel, CheckboxMetadata, CodeBlock, CodeBlockCollapseButton, CodeBlockCopyButton, CodeBlockDownloadButton, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Combobox, Count, countVariants, DatePicker, type DatePickerProps, DateRangePicker, DateTimeRangePicker, type DateRangePickerProps, type DateTimeRangePickerProps, type ShortcutItem, TimePicker, type TimePickerProps, type TimeFormat, type AmPm, type ComponentMeta, type ComponentStatusType, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSectionLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, HelperText, HoverCard, HoverCardContent, HoverCardTrigger, InlineCitation, InlineCitationCard, InlineCitationCardBody, InlineCitationCardTrigger, InlineCitationGroup, InlineCitationLink, type InlineCitationLinkProps, InlineCitationQuote, InlineCitationSource, InlineCitationText, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Kbd, KbdGroup, Label, Loader, Message, MessageAction, MessageActions, MessageContent, MessageResponse, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious, PaginationResultsPerPage, PaginationResultsPerPageLabel, PaginationSelectTrigger, PaginationStatus, PaginationTeleport, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverHeaderContent, PopoverSlot, PopoverTitle, PopoverTrigger, PortalContainerContext, PromptInput, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputModelSelect, PromptInputModelSelectContent, PromptInputModelSelectItem, PromptInputModelSelectTrigger, PromptInputModelSelectValue, PromptInputProvider, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, Reasoning, ReasoningContent, ReasoningHeader, ReasoningItem, RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemDescription, RadioGroupItemLabel, ScrollArea, ScrollBar, Search, SegmentedControl, SegmentedControlButton, SegmentedControlContent, SegmentedControlList, segmentedControlButtonVariants, segmentedControlListVariants, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Shimmer, Skeleton, Slider, Source, Sources, SourcesTitle, Switch, toast, Toaster, Tabs, TabsLabel, TabsList, TabsPanel, TabsTrigger, tabsListVariants, tabsTriggerVariants, Textarea, Topbar, TopbarAction, TopbarBreadcrumbs, TopbarCenter, TopbarIcon, TopbarLeft, TopbarMetadata, TopbarRight, type TopbarTheme, TopbarThemeSwitcher, Toggle, toggleVariants, Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, usePromptInputController, } from './components';