@nsaa/core 0.1.0-alpha.4 → 0.1.0-alpha.6

package/dist/index.js

@@ -22,8 +22,11 @@ import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxColl
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./dialog/dialog.js";
 import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./command/command.js";
 import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./context-menu/context-menu.js";
-import { DirectionProvider } from "./direction.js";
 import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger } from "./drawer/drawer.js";
+import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "./popover/popover.js";
+import { localeWeekStart, matchPreset, presets, todayIn } from "./date-range-picker/presets.js";
+import { DateRangePicker } from "./date-range-picker/date-range-picker.js";
+import { DirectionProvider } from "./direction.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./dropdown-menu/dropdown-menu.js";
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, useEmptyIllustration } from "./empty/empty.js";
 import { Label } from "./label/label.js";
@@ -32,20 +35,24 @@ import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLab
 import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "./input-otp/input-otp.js";
 import { Kbd, KbdGroup } from "./kbd/kbd.js";
 import { IconSwap } from "./lib/icon-swap.js";
+import { Meter, MeterIndicator, MeterLabel, MeterLegend, MeterSegment, MeterTrack, MeterValue } from "./meter/meter.js";
+import { Money, formatMoney } from "./money/money.js";
 import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "./native-select/native-select.js";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./pagination/pagination.js";
-import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "./popover/popover.js";
+import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue } from "./progress/progress.js";
 import { RadioGroup, RadioGroupItem } from "./radio-group/radio-group.js";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./select/select.js";
 import { Skeleton, SkeletonContent } from "./skeleton/skeleton.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip/tooltip.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from "./sidebar/sidebar.js";
 import { Slider } from "./slider/slider.js";
 import { lazyUisfxPlayer } from "./sound/lazy-uisfx.js";
+import { Stat, StatAction, StatChange, StatDescription, StatGroup, StatIcon, StatLabel, StatValue } from "./stat/stat.js";
 import { Switch } from "./switch/switch.js";
 import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table/table.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from "./tabs/tabs.js";
 import { Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, createToastManager, toast, useToastManager } from "./toast/toast.js";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip/tooltip.js";
 import { ToggleGroup } from "./toggle-group/toggle-group.js";
 import { Toolbar } from "./toolbar/toolbar.js";
 import "./lib/track-input-modality.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertClose, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertLink, AlertLinks, AlertTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, IconSwap, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, LoaderProvider, NativeSelect, NativeSelectOptGroup, NativeSelectOption, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, SOUND_MAP, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, SkeletonContent, Slider, SoundProvider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, ToggleGroup, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, createToastManager, lazyUisfxPlayer, registerLoader, registerLoaders, tabsListVariants, toast, useComboboxAnchor, useEmptyIllustration, useSound, useToastManager };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertClose, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertLink, AlertLinks, AlertTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, IconSwap, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, LoaderProvider, Meter, MeterIndicator, MeterLabel, MeterLegend, MeterSegment, MeterTrack, MeterValue, Money, NativeSelect, NativeSelectOptGroup, NativeSelectOption, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, SOUND_MAP, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SkeletonContent, Slider, SoundProvider, Spinner, Stat, StatAction, StatChange, StatDescription, StatGroup, StatIcon, StatLabel, StatValue, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, ToggleGroup, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, createToastManager, formatMoney, lazyUisfxPlayer, localeWeekStart, matchPreset, presets, registerLoader, registerLoaders, tabsListVariants, toast, todayIn, useComboboxAnchor, useEmptyIllustration, useSidebar, useSound, useToastManager };

package/dist/lib/dev.js

@@ -0,0 +1,14 @@
+"use client";
+// src/lib/dev.ts
+/**
+* True outside production builds. Bundlers replace `process.env.NODE_ENV` statically; where
+* nothing defines `process` (e.g. raw ESM in a browser) dev warnings are simply skipped.
+*/
+function isDev() {
+	try {
+		return true;
+	} catch {
+		return false;
+	}
+}
+export { isDev };

package/dist/meter/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Meter, MeterIndicator, MeterLabel, MeterLegend, MeterProps, MeterSegment, MeterSegmentProps, MeterTrack, MeterValue } from "./meter.js";
+export { Meter, MeterIndicator, MeterLabel, MeterLegend, type MeterProps, MeterSegment, type MeterSegmentProps, MeterTrack, MeterValue };

package/dist/meter/meter.d.ts

@@ -0,0 +1,33 @@
+
+import * as React from "react";
+import { Meter } from "@base-ui/react/meter";
+type MeterVariant = "default" | "success" | "warning" | "destructive" | "info";
+type ChartColor = "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5";
+type MeterSegmentProps = Omit<React.ComponentProps<"div">, "color"> & {
+  /** This part's amount, on the Meter's `min`–`max` scale. */
+  value: number;
+  /** Its name, in the legend and the track's text alternative. */
+  label: string;
+  /** A status colour. Ignored when `color` is set. */
+  variant?: MeterVariant;
+  /** A chart colour token (`chart-1` … `chart-5`). */
+  color?: ChartColor;
+};
+type MeterProps = Omit<Meter.Root.Props, "value"> & {
+  /** The amount. Leave it out when MeterSegment children give the parts. */
+  value?: number;
+  /** The fill colour: default (brand), success, warning, destructive or info. */
+  variant?: MeterVariant;
+  /** Track height: default 8 px, sm 4 px. */
+  size?: "default" | "sm";
+};
+declare function Meter$1({ className, children, value, min, max, variant, size, getAriaValueText, ...props }: MeterProps): React.JSX.Element;
+declare function MeterTrack({ className, children, ...props }: Meter.Track.Props): React.JSX.Element;
+declare function MeterIndicator({ className, ...props }: Meter.Indicator.Props): React.JSX.Element;
+/** One part of a segmented track. Parts under 2% keep 2 px so they stay visible. */
+declare function MeterSegment({ className, value, label, variant, color, style, ...props }: MeterSegmentProps): React.JSX.Element;
+/** Lists each segment with a swatch, its label and its share. */
+declare function MeterLegend({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function MeterLabel({ className, ...props }: Meter.Label.Props): React.JSX.Element;
+declare function MeterValue({ className, ...props }: Meter.Value.Props): React.JSX.Element;
+export { Meter$1 as Meter, MeterIndicator, MeterLabel, MeterLegend, type MeterProps, MeterSegment, type MeterSegmentProps, MeterTrack, MeterValue };

package/dist/meter/meter.js

@@ -0,0 +1,145 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Meter } from "@base-ui/react/meter";
+// src/meter/meter.tsx
+const FILL = {
+	default: "bg-(--nsaa-color-brand-foreground)",
+	success: "bg-(--nsaa-color-positive-foreground)",
+	warning: "bg-(--nsaa-color-warning-foreground)",
+	destructive: "bg-(--nsaa-color-danger-foreground)",
+	info: "bg-(--nsaa-color-info-foreground)",
+	"chart-1": "bg-chart-1",
+	"chart-2": "bg-chart-2",
+	"chart-3": "bg-chart-3",
+	"chart-4": "bg-chart-4",
+	"chart-5": "bg-chart-5"
+};
+const MeterContext = React.createContext({
+	variant: "default",
+	size: "default",
+	min: 0,
+	max: 100,
+	segments: [],
+	format: new Intl.NumberFormat(void 0, {
+		style: "percent",
+		maximumFractionDigits: 0
+	})
+});
+/** Segments are read from the Meter's children (MeterTrack > MeterSegment), so the legend and the
+text alternative need no registration pass. */
+function collectSegments(children) {
+	const found = [];
+	React.Children.forEach(children, (child) => {
+		if (!React.isValidElement(child)) return;
+		if (child.type === MeterSegment) found.push(child.props);
+		else if (child.type === MeterTrack) found.push(...collectSegments(child.props.children));
+	});
+	return found;
+}
+function hasTrack(children) {
+	return React.Children.toArray(children).some((child) => React.isValidElement(child) && child.type === MeterTrack);
+}
+function Meter$1({ className, children, value, min = 0, max = 100, variant = "default", size = "default", getAriaValueText, ...props }) {
+	const segments = collectSegments(children);
+	const format = React.useMemo(() => new Intl.NumberFormat(void 0, {
+		style: "percent",
+		maximumFractionDigits: 0
+	}), []);
+	const share = (v) => format.format((v - (segments.length ? 0 : min)) / (max - min));
+	const total = segments.length ? segments.reduce((sum, s) => sum + s.value, min) : value ?? min;
+	const segmentText = segments.length ? segments.map((s) => `${s.label} ${share(s.value)}`).join(", ") : void 0;
+	return /* @__PURE__ */ jsx(MeterContext.Provider, {
+		value: {
+			variant,
+			size,
+			min,
+			max,
+			segments,
+			format
+		},
+		children: /* @__PURE__ */ jsxs(Meter.Root, {
+			value: total,
+			min,
+			max,
+			"data-slot": "meter",
+			"data-size": size,
+			getAriaValueText: segmentText ? () => segmentText : getAriaValueText,
+			className: cn("flex flex-wrap gap-x-3 gap-y-2", className),
+			...props,
+			children: [children, !hasTrack(children) && /* @__PURE__ */ jsx(MeterTrack, { children: /* @__PURE__ */ jsx(MeterIndicator, {}) })]
+		})
+	});
+}
+function MeterTrack({ className, children, ...props }) {
+	const { size, segments } = React.useContext(MeterContext);
+	return /* @__PURE__ */ jsx(Meter.Track, {
+		"data-slot": "meter-track",
+		className: cn("relative flex w-full items-center overflow-hidden rounded-full bg-muted", size === "sm" ? "h-1" : "h-2", segments.length > 0 && "gap-0.5 bg-transparent", className),
+		...props,
+		children
+	});
+}
+function MeterIndicator({ className, ...props }) {
+	const { variant } = React.useContext(MeterContext);
+	return /* @__PURE__ */ jsx(Meter.Indicator, {
+		"data-slot": "meter-indicator",
+		className: cn("h-full rounded-full", FILL[variant], className),
+		...props
+	});
+}
+/** One part of a segmented track. Parts under 2% keep 2 px so they stay visible. */
+function MeterSegment({ className, value, label, variant, color, style, ...props }) {
+	const { min, max } = React.useContext(MeterContext);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "meter-segment",
+		"aria-hidden": "true",
+		"data-label": label,
+		className: cn("h-full min-w-0.5 rounded-full", FILL[color ?? variant ?? "chart-1"], className),
+		style: {
+			flexBasis: `${(value - min) / (max - min) * 100}%`,
+			...style
+		},
+		...props
+	});
+}
+/** Lists each segment with a swatch, its label and its share. */
+function MeterLegend({ className, ...props }) {
+	const { segments, min, max, format } = React.useContext(MeterContext);
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "meter-legend",
+		className: cn("flex w-full flex-wrap gap-x-4 gap-y-1 text-sm", className),
+		...props,
+		children: segments.map((segment) => /* @__PURE__ */ jsxs("li", {
+			"data-slot": "meter-legend-item",
+			className: "inline-flex items-center gap-1.5",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: cn("size-2 shrink-0 rounded-full", FILL[segment.color ?? segment.variant ?? "chart-1"])
+				}),
+				/* @__PURE__ */ jsx("span", { children: segment.label }),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground tabular-nums",
+					children: format.format((segment.value - min) / (max - min))
+				})
+			]
+		}, segment.label))
+	});
+}
+function MeterLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Meter.Label, {
+		"data-slot": "meter-label",
+		className: cn("text-sm font-medium", className),
+		...props
+	});
+}
+function MeterValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Meter.Value, {
+		"data-slot": "meter-value",
+		className: cn("ms-auto text-sm text-muted-foreground tabular-nums", className),
+		...props
+	});
+}
+export { Meter$1 as Meter, MeterIndicator, MeterLabel, MeterLegend, MeterSegment, MeterTrack, MeterValue };

package/dist/money/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Money, MoneyOptions, MoneyProps, formatMoney } from "./money.js";
+export { Money, type MoneyOptions, type MoneyProps, formatMoney };

package/dist/money/money.d.ts

@@ -0,0 +1,28 @@
+
+import * as React from "react";
+type MoneyOptions = {
+  /** ISO 4217 code, such as `GHS` or `USD`. */
+  currency: string;
+  /** BCP 47 locale. Defaults to the document's `lang`, then the runtime's locale. */
+  locale?: string;
+  /** `minor` (default): `value` is an integer in minor units (pesewas, cents). `major`: a decimal amount. */
+  unit?: "minor" | "major";
+  /** How the currency shows: `symbol` (default), `narrowSymbol`, `code`, or `none` (digits only). */
+  currencyDisplay?: "symbol" | "narrowSymbol" | "code" | "none";
+  /** `standard` (default) or `compact` (GH₵12.3M). */
+  notation?: "standard" | "compact";
+  /** When the sign shows: `auto` (default), `always` or `exceptZero`. */
+  signDisplay?: "auto" | "always" | "exceptZero";
+  /** Negative amounts: `minus` (default, a true minus sign) or `parentheses` (accounting). */
+  negative?: "minus" | "parentheses";
+};
+/** The same string `<Money>` shows, for CSV, titles and charts. */
+declare function formatMoney(value: number, options: MoneyOptions): string;
+type MoneyProps = Omit<React.ComponentProps<"span">, "children"> & MoneyOptions & {
+  /** The amount: minor units unless `unit="major"`. */
+  value: number;
+  /** `auto`: negative amounts take the danger colour, positive ones with `signDisplay="always"` the positive colour. The sign always shows, so colour is never the only signal. */
+  tone?: "none" | "auto";
+};
+declare function Money({ value, currency, locale, unit, currencyDisplay, notation, signDisplay, negative, tone, className, ...props }: MoneyProps): React.JSX.Element;
+export { Money, type MoneyOptions, type MoneyProps, formatMoney };

package/dist/money/money.js

@@ -0,0 +1,77 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/money/money.tsx
+const MINUS = "−";
+function resolveLocale(locale) {
+	if (locale) return locale;
+	if (typeof document !== "undefined" && document.documentElement.lang) return document.documentElement.lang;
+}
+/** The currency's own decimals (2 for GHS and USD, 0 for JPY), from Intl. */
+function fractionDigits(currency) {
+	return new Intl.NumberFormat("en", {
+		style: "currency",
+		currency
+	}).resolvedOptions().maximumFractionDigits;
+}
+function moneyParts(value, options) {
+	const { currency, unit = "minor", currencyDisplay = "symbol", notation = "standard", signDisplay = "auto", negative = "minus" } = options;
+	const amount = unit === "minor" ? value / 10 ** fractionDigits(currency) : value;
+	return new Intl.NumberFormat(resolveLocale(options.locale), {
+		style: "currency",
+		currency,
+		currencyDisplay: currencyDisplay === "none" ? "symbol" : currencyDisplay,
+		currencySign: negative === "parentheses" ? "accounting" : "standard",
+		notation,
+		signDisplay
+	}).formatToParts(amount).filter((part) => !(currencyDisplay === "none" && part.type === "currency")).map((part) => part.type === "minusSign" ? {
+		...part,
+		value: MINUS
+	} : part);
+}
+/** The same string `<Money>` shows, for CSV, titles and charts. */
+function formatMoney(value, options) {
+	return moneyParts(value, options).map((part) => part.value).join("").trim();
+}
+function Money({ value, currency, locale, unit, currencyDisplay, notation, signDisplay, negative, tone = "none", className, ...props }) {
+	const options = {
+		currency,
+		locale,
+		unit,
+		currencyDisplay,
+		notation,
+		signDisplay,
+		negative
+	};
+	const parts = moneyParts(value, options);
+	const spoken = negative === "parentheses" && value < 0 ? formatMoney(value, {
+		...options,
+		negative: "minus"
+	}) : null;
+	const runs = [];
+	for (const part of parts) {
+		const symbol = part.type === "currency";
+		const last = runs.at(-1);
+		if (last && last.symbol === symbol && !symbol) last.text += part.value;
+		else runs.push({
+			symbol,
+			text: part.value
+		});
+	}
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "money",
+		className: cn("whitespace-nowrap tabular-nums lining-nums", tone === "auto" ? value < 0 ? "text-(--nsaa-color-danger-foreground)" : value > 0 && signDisplay === "always" ? "text-(--nsaa-color-positive-foreground)" : void 0 : void 0, className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": spoken ? true : void 0,
+			children: runs.map((run, index) => /* @__PURE__ */ jsx("span", {
+				"data-slot": run.symbol ? "money-symbol" : "money-amount",
+				children: run.text
+			}, index))
+		}), spoken && /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: spoken
+		})]
+	});
+}
+export { Money, formatMoney };

package/dist/progress/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue } from "./progress.js";
+export { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue };

package/dist/progress/progress.d.ts

@@ -0,0 +1,8 @@
+
+import { Progress } from "@base-ui/react/progress";
+declare function Progress$1({ className, children, value, ...props }: Progress.Root.Props): import("react").JSX.Element;
+declare function ProgressTrack({ className, ...props }: Progress.Track.Props): import("react").JSX.Element;
+declare function ProgressIndicator({ className, ...props }: Progress.Indicator.Props): import("react").JSX.Element;
+declare function ProgressLabel({ className, ...props }: Progress.Label.Props): import("react").JSX.Element;
+declare function ProgressValue({ className, ...props }: Progress.Value.Props): import("react").JSX.Element;
+export { Progress$1 as Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue };

package/dist/progress/progress.js

@@ -0,0 +1,43 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Progress } from "@base-ui/react/progress";
+// src/progress/progress.tsx
+function Progress$1({ className, children, value, ...props }) {
+	return /* @__PURE__ */ jsxs(Progress.Root, {
+		value,
+		"data-slot": "progress",
+		className: cn("flex flex-wrap gap-3", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ProgressTrack, { children: /* @__PURE__ */ jsx(ProgressIndicator, {}) })]
+	});
+}
+function ProgressTrack({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress.Track, {
+		className: cn("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted", className),
+		"data-slot": "progress-track",
+		...props
+	});
+}
+function ProgressIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress.Indicator, {
+		"data-slot": "progress-indicator",
+		className: cn("h-full bg-(--nsaa-color-brand-foreground) transition-all", className),
+		...props
+	});
+}
+function ProgressLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress.Label, {
+		className: cn("text-sm font-medium", className),
+		"data-slot": "progress-label",
+		...props
+	});
+}
+function ProgressValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress.Value, {
+		className: cn("ml-auto text-sm text-muted-foreground tabular-nums", className),
+		"data-slot": "progress-value",
+		...props
+	});
+}
+export { Progress$1 as Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue };

package/dist/sidebar/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from "./sidebar.js";
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };

package/dist/sidebar/sidebar.d.ts

@@ -0,0 +1,66 @@
+
+import { Button } from "../button/button.js";
+import { Input } from "../input/input.js";
+import { Separator } from "../separator/separator.js";
+import { TooltipContent } from "../tooltip/tooltip.js";
+import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+type SidebarContextProps = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextProps;
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}): React.JSX.Element;
+declare function Sidebar({ side, variant, collapsible, className, children, dir, "aria-label": ariaLabel, ...props }: React.ComponentProps<"div"> & {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+}): React.JSX.Element;
+declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function SidebarRail({ className, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+/** The page beside the sidebar: a `main` landmark. Pass `render={<div />}` when the page already has
+    one (a demo, or a sidebar inside a page section). */
+declare function SidebarInset({ className, render, ...props }: useRender.ComponentProps<"main">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): React.JSX.Element;
+declare function SidebarHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
+declare function SidebarContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarGroupLabel({ className, render, id: idProp, ...props }: useRender.ComponentProps<"div"> & React.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function SidebarGroupAction({ className, render, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare const sidebarMenuButtonVariants: (props?: ({
+  variant?: "default" | "outline" | null | undefined;
+  size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, ref, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
+  isActive?: boolean;
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>): React.JSX.Element;
+declare function SidebarMenuAction({ className, render, showOnHover, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
+  showOnHover?: boolean;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<"div"> & {
+  showIcon?: boolean;
+}): React.JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function SidebarMenuSubButton({ render, size, isActive, className, ...props }: useRender.ComponentProps<"a"> & React.ComponentProps<"a"> & {
+  size?: "sm" | "md";
+  isActive?: boolean;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };