@makolabs/ripple 2.5.9 → 3.0.0

package/dist/forms/segmented-control.js

@@ -2,7 +2,9 @@ import { tv } from 'tailwind-variants';
 import { cn } from '../helper/cls.js';
 import { Color, Size } from '../variants.js';
 export const segmentedTrack = tv({
-    base: 'inline-flex overflow-hidden rounded-lg border',
+    // `max-w-full overflow-x-auto` + hidden scrollbar lets a long segment
+    // row swipe on narrow viewports instead of bleeding past the parent.
+    base: 'inline-flex max-w-full overflow-x-auto rounded-lg border [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
     variants: {
         appearance: {
             surface: 'border-default-200 bg-white p-0',
@@ -11,7 +13,13 @@ export const segmentedTrack = tv({
         },
         orientation: {
             horizontal: 'flex-row',
-            vertical: 'w-full flex-col'
+            vertical: 'w-full flex-col',
+            // `auto`: horizontal + content width by default, flips to full-width
+            // column when the parent @container drops below 250px. Component
+            // sets `@container` on the rootClass wrapper for the query to resolve.
+            // `w-fit` prevents flex-stretch when labelLayout='above' puts this
+            // inside a flex-col root.
+            auto: 'w-fit flex-row @max-[250px]:w-full @max-[250px]:flex-col'
         }
     },
     defaultVariants: {
@@ -31,7 +39,7 @@ const selectedByColor = {
 const segmentSize = {
     [Size.XS]: 'gap-1 px-2 py-1 text-xs',
     [Size.SM]: 'gap-1.5 px-3 py-1.5 text-xs',
-    [Size.BASE]: 'gap-1.5 px-3 py-1.5 text-sm',
+    [Size.MD]: 'gap-1.5 px-3 py-1.5 text-sm',
     [Size.LG]: 'gap-2 px-4 py-2 text-base',
     [Size.XL]: 'gap-2 px-4 py-2.5 text-lg',
     [Size.XXL]: 'gap-2 px-5 py-3 text-xl'
@@ -39,14 +47,17 @@ const segmentSize = {
 export function segmentClasses(args) {
     const { selected, disabled, appearance, color, size } = args;
     if (appearance === 'pills') {
-        const pillBase = cn('flex cursor-pointer items-center justify-center rounded-full font-medium transition-colors duration-150', 'focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-offset-2', segmentSize[size], disabled && 'cursor-not-allowed opacity-50');
+        const pillBase = cn('flex cursor-pointer items-center justify-center rounded-full font-medium transition-colors duration-150 shrink-0 whitespace-nowrap', 'focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-offset-2', segmentSize[size], disabled && 'cursor-not-allowed opacity-50');
         if (disabled)
             return cn(pillBase, 'text-default-400');
         if (selected)
             return cn(pillBase, selectedByColor[color]);
         return cn(pillBase, 'bg-default-100 text-default-700 hover:bg-default-200');
     }
-    const base = cn('flex cursor-pointer items-center justify-center font-medium transition-colors duration-150', 'focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none', appearance === 'inverted' ? 'focus-visible:ring-offset-0' : 'focus-visible:ring-offset-2', segmentSize[size], disabled && 'cursor-not-allowed opacity-50');
+    const base = cn('flex cursor-pointer items-center justify-center font-medium transition-colors duration-150 shrink-0 whitespace-nowrap', 'focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none', appearance === 'inverted' ? 'focus-visible:ring-offset-0' : 'focus-visible:ring-offset-2', 
+    // Inverted track has p-0.5 padding around segments — give them inner radius
+    // so selected segments don't render as square boxes (matches surface look).
+    appearance === 'inverted' && 'rounded-md', segmentSize[size], disabled && 'cursor-not-allowed opacity-50');
     if (disabled) {
         return cn(base, 'text-default-400');
     }

package/dist/forms/slider.d.ts

@@ -14,7 +14,7 @@ export declare const slider: import("tailwind-variants").TVReturnType<{
             label: string;
             value: string;
         };
-        base: {
+        md: {
             track: string;
             thumb: string;
             mark: string;
@@ -82,7 +82,7 @@ export declare const slider: import("tailwind-variants").TVReturnType<{
             label: string;
             value: string;
         };
-        base: {
+        md: {
             track: string;
             thumb: string;
             mark: string;
@@ -150,7 +150,7 @@ export declare const slider: import("tailwind-variants").TVReturnType<{
             label: string;
             value: string;
         };
-        base: {
+        md: {
             track: string;
             thumb: string;
             mark: string;

package/dist/forms/slider.js

@@ -30,7 +30,7 @@ export const slider = tv({
                 label: 'text-xs',
                 value: 'text-xs'
             },
-            [Size.BASE]: {
+            [Size.MD]: {
                 track: 'h-2',
                 thumb: 'w-4 h-4',
                 mark: 'text-sm top-6',
@@ -76,7 +76,7 @@ export const slider = tv({
         }
     },
     defaultVariants: {
-        size: Size.BASE,
+        size: Size.MD,
         disabled: false,
         hasError: false
     }

package/dist/funcs/user-management.remote.js

@@ -1,4 +1,4 @@
-import { query, command } from '$app/server';
+import { command } from '$app/server';
 import { getRequestEvent } from '$app/server';
 import { env } from '$env/dynamic/private';
 import { building } from '$app/environment';

package/dist/header/Breadcrumbs.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
-	import { warnDeprecatedProps } from '../helper/deprecation.js';
 	import { breadcrumbs } from './breadcrumbs.js';
 	import type { BreadcrumbsProps } from '../index.js';
 	import { resolve } from '$app/paths';
@@ -12,27 +11,12 @@
 		weight = 'medium',
 		icon: SeparatorIcon,
 		class: className = '',
-		listclass,
-		listClass = listclass ?? '',
-		itemclass,
-		itemClass = itemclass ?? '',
-		separatorclass,
-		separatorClass = separatorclass ?? '',
-		wrapperclass,
-		wrapperClass = wrapperclass ?? ''
+		listClass = '',
+		itemClass = '',
+		separatorClass = '',
+		wrapperClass = ''
 	}: BreadcrumbsProps = $props();
 
-	warnDeprecatedProps(
-		'Breadcrumbs',
-		{ listclass, itemclass, separatorclass, wrapperclass },
-		{
-			listclass: 'listClass',
-			itemclass: 'itemClass',
-			separatorclass: 'separatorClass',
-			wrapperclass: 'wrapperClass'
-		}
-	);
-
 	const { base, list, item, separator, wrapper } = $derived(
 		breadcrumbs({
 			size,

package/dist/header/PageHeader.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
-	import { warnDeprecatedProps } from '../helper/deprecation.js';
 	import type { PageHeaderProps } from '../index.js';
 	import Breadcrumbs from './Breadcrumbs.svelte';
 
@@ -10,19 +9,10 @@
 		breadcrumbs = [],
 		children,
 		class: className = '',
-		titleclass,
-		titleClass = titleclass ?? '',
+		titleClass = '',
 		layout = 'vertical'
 	}: PageHeaderProps = $props();
 
-	warnDeprecatedProps(
-		'PageHeader',
-		{ titleclass },
-		{
-			titleclass: 'titleClass'
-		}
-	);
-
 	const defaultTitleClasses =
 		'font-bold text-default-900 sm:tracking-tight sm:truncate text-2xl/7 sm:text-3xl';
 
@@ -47,9 +37,11 @@
 				{/if}
 			</div>
 
-			<!-- Actions area - responsive positioning -->
+			<!-- Actions area - responsive positioning. `flex-wrap` lets
+			     multiple buttons wrap to a second row on narrow viewports
+			     instead of overflowing. -->
 			{#if children}
-				<div class="flex-shrink-0 md:ml-6">
+				<div class="flex flex-wrap items-center gap-2 md:ml-6 md:shrink-0">
 					{@render children()}
 				</div>
 			{/if}
@@ -70,7 +62,7 @@
 
 			<!-- Children as separate unit below -->
 			{#if children}
-				<div class="mt-4">
+				<div class="mt-4 flex flex-wrap items-center gap-2">
 					{@render children()}
 				</div>
 			{/if}

package/dist/header/breadcrumbs.d.ts

@@ -13,7 +13,7 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
         sm: {
             base: string;
         };
-        base: {
+        md: {
             base: string;
         };
         lg: {
@@ -86,7 +86,7 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
         sm: {
             base: string;
         };
-        base: {
+        md: {
             base: string;
         };
         lg: {
@@ -159,7 +159,7 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
         sm: {
             base: string;
         };
-        base: {
+        md: {
             base: string;
         };
         lg: {
@@ -232,17 +232,9 @@ export type BreadcrumbsProps = {
     color?: keyof typeof breadcrumbs.variants.color;
     icon?: Component;
     class?: ClassValue;
-    /** @deprecated Use listClass instead */
-    listclass?: ClassValue;
     listClass?: ClassValue;
-    /** @deprecated Use itemClass instead */
-    itemclass?: ClassValue;
     itemClass?: ClassValue;
-    /** @deprecated Use separatorClass instead */
-    separatorclass?: ClassValue;
     separatorClass?: ClassValue;
-    /** @deprecated Use wrapperClass instead */
-    wrapperclass?: ClassValue;
     wrapperClass?: ClassValue;
 };
 export type { BreadcrumbItem };

package/dist/header/breadcrumbs.js

@@ -2,11 +2,16 @@ import { tv } from 'tailwind-variants';
 import { Size, Color } from '../variants.js';
 export const breadcrumbs = tv({
     slots: {
-        base: 'flex',
-        list: 'flex flex-wrap items-center space-x-2.5',
+        // `min-w-0` lets the breadcrumb participate in a flex/grid parent
+        // that constrains its width so overflow scrolling actually triggers.
+        base: 'flex min-w-0',
+        // Switched from `flex-wrap` to `flex-nowrap` + horizontal scroll so
+        // deep paths stay on one line on narrow viewports and swipe cleanly
+        // instead of reflowing into a wall of text.
+        list: 'flex flex-nowrap items-center space-x-2.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
         item: 'flex items-center whitespace-nowrap',
-        separator: 'flex items-center',
-        wrapper: 'flex items-center gap-2.5'
+        separator: 'flex items-center shrink-0',
+        wrapper: 'flex items-center gap-2.5 shrink-0'
     },
     variants: {
         size: {
@@ -16,7 +21,7 @@ export const breadcrumbs = tv({
             [Size.SM]: {
                 base: 'items-center text-sm'
             },
-            [Size.BASE]: {
+            [Size.MD]: {
                 base: 'items-center text-base'
             },
             [Size.LG]: {

package/dist/header/header-types.d.ts

@@ -2,42 +2,93 @@ import type { ClassValue } from 'tailwind-variants';
 import type { Snippet } from 'svelte';
 import type { Component } from 'svelte';
 import type { VariantColors } from '../index.js';
+/** Single crumb in `<Breadcrumbs>`. */
 export type BreadcrumbItem = {
+    /** Visible text. */
     label: string;
+    /** Target URL. Use `'#'` for non-navigable items. */
     href: string;
+    /** Mark as the current page (last crumb, no link styling). */
     current?: boolean;
+    /** Optional icon rendered before the label. */
     icon?: Component;
 };
+/**
+ * Props for `<Breadcrumbs>` — a horizontal trail of links showing the
+ * user's location in a hierarchy. Pair with `<PageHeader>` for a
+ * standard top-of-page treatment.
+ *
+ * @example
+ * ```svelte
+ * <Breadcrumbs
+ *   items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Reports', href: '/reports' },
+ *     { label: 'Q1 2026', href: '/reports/q1-2026', current: true }
+ *   ]}
+ * />
+ * ```
+ */
 export type BreadcrumbsProps = {
+    /** Ordered list of crumbs from root to current. */
     items: BreadcrumbItem[];
-    size?: 'xs' | 'sm' | 'base' | 'lg';
+    /** Text size scale. @default 'sm' */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** @default 'medium' */
     weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    /** @default 'default' */
     color?: VariantColors;
+    /** Custom separator icon (e.g. chevron, slash). Defaults to a chevron. */
     icon?: Component;
     class?: ClassValue;
-    /** @deprecated Use listClass instead */
-    listclass?: ClassValue;
+    /** Classes on the `<ol>`. */
     listClass?: ClassValue;
-    /** @deprecated Use itemClass instead */
-    itemclass?: ClassValue;
+    /** Classes on each `<li>` item. */
     itemClass?: ClassValue;
-    /** @deprecated Use separatorClass instead */
-    separatorclass?: ClassValue;
+    /** Classes on the separator span. */
     separatorClass?: ClassValue;
-    /** @deprecated Use wrapperClass instead */
-    wrapperclass?: ClassValue;
+    /** Classes on the inner item wrapper (icon + label). */
     wrapperClass?: ClassValue;
     testId?: string;
 };
+/**
+ * Props for `<PageHeader>` — the top-of-page title block. Combines a
+ * heading, optional subtitle, breadcrumbs, and a children slot for
+ * page-level actions (Save, Export, etc.).
+ *
+ * @example
+ * ```svelte
+ * <PageHeader
+ *   title="Q1 2026 report"
+ *   subtitle="Generated 2 hours ago"
+ *   breadcrumbs={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Reports', href: '/reports' }
+ *   ]}
+ * >
+ *   <Button color="primary">Export PDF</Button>
+ * </PageHeader>
+ * ```
+ */
 export type PageHeaderProps = {
+    /** Page title — main heading. */
     title: string;
+    /** Short subtitle below the title. */
     subtitle?: string;
+    /** Optional crumb trail rendered above the title. */
     breadcrumbs?: BreadcrumbItem[];
+    /**
+     * Right-aligned (horizontal layout) or below-the-title (vertical)
+     * content — typically page-level action buttons.
+     */
     children?: Snippet;
     class?: ClassValue;
-    /** @deprecated Use titleClass instead */
-    titleclass?: ClassValue;
+    /** Classes on the title element. */
     titleClass?: ClassValue;
+    /**
+     * - `'vertical'` (default): title above, actions below
+     * - `'horizontal'`: title left, actions right (md+ breakpoint)
+     */
     layout?: 'vertical' | 'horizontal';
     testId?: string;
 };

package/dist/index.d.ts

@@ -1,10 +1,16 @@
 import { ChartColor, Color, Size } from './variants.js';
 /**
  * Size System:
- * - Size.*: Component dimensions (XS, SM, BASE, LG, XL, XXL)
+ * - Size.*: Component dimensions (XS, SM, MD, LG, XL, XXL)
  */
 export type VariantSizes = (typeof Size)[keyof typeof Size];
 export type VariantColors = (typeof Color)[keyof typeof Color];
+/**
+ * Border-radius scale. Matches Tailwind's `rounded-*` utility suffixes
+ * plus `'none'` for no corners and `'full'` for fully rounded (pills,
+ * avatar badges). Use on any component that exposes a `rounded` prop.
+ */
+export type RoundedSizes = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 /**
  * Color System:
  * - Color.*: UI component colors (buttons, text, backgrounds)
@@ -19,6 +25,7 @@ export type { ClassValue } from 'tailwind-variants';
 export type { BadgeProps } from './elements/badge/badge-types.js';
 export type { BaseButtonProps, ButtonHTMLProps, AnchorHTMLProps, ButtonProps } from './button/button-types.js';
 export type { ModalProps } from './modal/modal-types.js';
+export type { ConfirmDialogProps } from './modal/confirm-dialog-types.js';
 export type { DrawerProps } from './drawer/drawer-types.js';
 export type { DropdownItem, DropSection, DropHeaderConfig, DropdownMenuProps, SelectItem, SelectProps } from './elements/dropdown/dropdown-types.js';
 export type { CardProps, AlertProps, MetricDetail, MetricCardProps } from './layout/card/card-types.js';
@@ -29,7 +36,7 @@ export type { TabItem, TabProps, TabsGroupProps, TabContentProps } from './layou
 export type { NavbarLinkItem, NavbarProps } from './layout/navbar/navbar-types.js';
 export type { MenuBar, BaseNavigationItem, WithIcon, Activatable, LinkItem, ParentItem, DividerItem, NavigationItem, LogoType, NavGroupProps, NavItemProps, SidebarProps } from './layout/sidebar/sidebar-types.js';
 export type { ChartColorKey, ChartColorValue, ChartColors, ChartType, ChartColorString, XAxisConfig, YAxisConfig, SeriesConfig, ChartThreshold, ChartAnnotation, GridConfig, LegendConfig, TooltipConfig, ToolboxConfig, ChartConfig, PointClickType, ChartRenderType, ChartProps } from './charts/chart-types.js';
-export type { FormProps, InputProps, RadioOption, CheckboxProps, ToggleProps, CurrencyOption, NumberInputProps, DateRangeProps, DateSelectEvent, TagsProps, SliderMode, NotationType, EnumOption, SliderProps, SegmentedOption, SegmentedControlProps } from './forms/form-types.js';
+export type { FormProps, InputProps, TextareaProps, RadioOption, RadioGroupProps, CheckboxProps, ToggleProps, CurrencyOption, NumberInputProps, DateRangeProps, DateSelectEvent, TagsProps, SliderMode, NotationType, EnumOption, SliderProps, SliderTick, SegmentedOption, SegmentedControlProps } from './forms/form-types.js';
 export type { CountryCode } from './forms/market/country-data.js';
 export type { MarketCode } from './forms/market/market.js';
 export { ALL_COUNTRY_CODES, COUNTRY_NAMES } from './forms/market/country-data.js';
@@ -38,22 +45,31 @@ export type { MarketSelectorProps } from './forms/market/market-selector-types.j
 export { countryCodeToFlagEmoji } from './forms/market/flag-emoji.js';
 export type { ProgressSegment, ProgressProps } from './elements/progress/progress-types.js';
 export type { SpinnerProps } from './elements/spinner/spinner-types.js';
+export type { SkeletonProps, SkeletonVariant } from './elements/skeleton/skeleton-types.js';
 export type { EmptyStateProps, EmptyStateSize } from './elements/empty-state/empty-state-types.js';
-export type { TooltipProps, TooltipPlacement } from './elements/tooltip/tooltip-types.js';
+export type { TooltipProps, TooltipPlacement, TooltipSize, TooltipVariant } from './elements/tooltip/tooltip-types.js';
+export type { PopoverProps, PopoverPlacement, PopoverTrigger } from './elements/popover/popover-types.js';
+export type { CalendarProps, CalendarMode } from './forms/calendar/calendar-types.js';
+export type { DatePickerProps } from './forms/date-picker/date-picker-types.js';
+export type { ComboBoxProps, ComboBoxItem } from './elements/combobox/combobox-types.js';
+export type { ContextMenuProps, ContextMenuItem } from './elements/context-menu/context-menu-types.js';
 export type { AccordionProps } from './elements/accordion/accordion-types.js';
-export type { FilterTab, FilterGroup, CompactFiltersProps } from './filters/filter-types.js';
+export type { FilterTab, FilterGroup, FilterSelectionValue, DatePreset, DateRangeConfig, DateRangeValue, CompactFiltersProps } from './filters/filter-types.js';
+export { defaultDatePresets, toIsoDate, fromIsoDate } from './filters/date-presets.js';
+export type { StepperProps, StepperStep, StepState, StepperOrientation } from './layout/stepper/stepper-types.js';
 export type { ActivityItemBadge, ActivityItemAction, ActivityItem, ActivityListProps, ActivityListSize } from './layout/activity-list/activity-list-types.js';
 export type { FileUploadProps, FileUploadSize, FilePreviewProps, UploadedFile, StagedFile } from './elements/file-upload/file-upload-types.js';
 export type { ChatMessageType, StreamingCallback, ChatAction, ChatMessage, ChatResponse, QuickAction, FileBrowserProps } from './ai/ai-types.js';
-export type { GetUsersOptions, GetUsersResult, UserEmail, UserPhone, User, Permission, Role, UserTableProps, UserModalProps, UserViewModalProps, UserManagementAdapter, UserManagementProps, FormErrors } from './user-management/user-management-types.js';
+export type { GetUsersOptions, GetUsersResult, UserEmail, UserPhone, User, Permission, Role, UserTableProps, UserModalProps, UserModalSavePayload, UserViewModalProps, UserManagementAdapter, UserManagementProps, FormErrors } from './user-management/user-management-types.js';
 export { tv, cn } from './helper/cls.js';
 export { isRouteActive } from './helper/nav.svelte.js';
 export { default as Button } from './button/Button.svelte';
 export { default as Modal } from './modal/Modal.svelte';
 export { default as ModalFooter } from './modal/ModalFooter.svelte';
+export { default as ConfirmDialog } from './modal/ConfirmDialog.svelte';
 export { default as Pipeline } from './pipeline/Pipeline.svelte';
 export { pipelineVariants } from './pipeline/pipeline.js';
-export type { PipelineStage, PipelineStageColor, PipelineStageEvent, PipelineStageClickEvent, PipelineStagePointerEvent, PipelineProps } from './pipeline/pipeline-types.js';
+export type { PipelineStage, PipelineStageEvent, PipelineStageClickEvent, PipelineStagePointerEvent, PipelineProps } from './pipeline/pipeline-types.js';
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as PageHeader } from './header/PageHeader.svelte';
 export { default as Breadcrumbs } from './header/Breadcrumbs.svelte';
@@ -70,34 +86,44 @@ export { default as Tab } from './layout/tabs/Tab.svelte';
 export { default as TabContent } from './layout/tabs/TabContent.svelte';
 export { default as TabGroup } from './layout/tabs/TabGroup.svelte';
 export { default as Table } from './layout/table/Table.svelte';
-export { default as Cells } from './layout/table/Cells.svelte';
+export * as Cells from './layout/table/Cells.svelte';
 export { default as Navbar } from './layout/navbar/Navbar.svelte';
 export { default as Sidebar } from './layout/sidebar/Sidebar.svelte';
 export { default as NavItem } from './layout/sidebar/NavItem.svelte';
 export { default as NavGroup } from './layout/sidebar/NavGroup.svelte';
 export { default as ActivityList } from './layout/activity-list/ActivityList.svelte';
+export { default as Stepper } from './layout/stepper/Stepper.svelte';
 export { default as Progress } from './elements/progress/Progress.svelte';
 export { default as Spinner } from './elements/spinner/Spinner.svelte';
+export { default as Skeleton } from './elements/skeleton/Skeleton.svelte';
 export { spinner as spinnerVariants } from './elements/spinner/spinner.js';
 export { default as EmptyState } from './elements/empty-state/EmptyState.svelte';
 export { emptyState as emptyStateVariants } from './elements/empty-state/empty-state.js';
 export { default as Tooltip } from './elements/tooltip/Tooltip.svelte';
+export { default as Popover } from './elements/popover/Popover.svelte';
+export { default as ComboBox } from './elements/combobox/ComboBox.svelte';
+export { default as ContextMenu } from './elements/context-menu/ContextMenu.svelte';
 export { default as Accordion } from './elements/accordion/Accordion.svelte';
 export { default as Chart } from './charts/Chart.svelte';
 export { default as FileUpload } from './elements/file-upload/FileUpload.svelte';
 export { default as FilesPreview } from './elements/file-upload/FilesPreview.svelte';
-export { default as Toaster } from './sonner/sonner.svelte';
+export { Toaster, toast } from './sonner/index.js';
+export type { ToasterProps, ToastT } from './sonner/index.js';
 export { default as AIChatInterface } from './ai/AIChatInterface.svelte';
 export { default as MermaidRenderer } from './ai/MermaidRenderer.svelte';
 export { default as CodeRenderer } from './ai/CodeRenderer.svelte';
 export * from './ai/content-detector.js';
 export { default as Form } from './forms/Form.svelte';
 export { default as Input } from './forms/Input.svelte';
+export { default as Textarea } from './forms/Textarea.svelte';
+export { default as RadioGroup } from './forms/RadioGroup.svelte';
 export { default as Checkbox } from './forms/Checkbox.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
 export { default as Slider } from './forms/Slider.svelte';
 export { default as NumberInput } from './forms/NumberInput.svelte';
 export { default as DateRange } from './forms/DateRange.svelte';
+export { default as Calendar } from './forms/calendar/Calendar.svelte';
+export { default as DatePicker } from './forms/date-picker/DatePicker.svelte';
 export { default as Tags } from './forms/Tags.svelte';
 export { default as SegmentedControl } from './forms/SegmentedControl.svelte';
 export { default as MarketSelector } from './forms/MarketSelector.svelte';
@@ -114,7 +140,7 @@ export { activityList } from './layout/activity-list/activity-list.js';
 export { slider } from './forms/slider.js';
 export type { SegmentAppearance } from './forms/segmented-control.js';
 export { segmentedTrack, segmentClasses, segmentedLabelClasses } from './forms/segmented-control.js';
-export { CompactFilters } from './filters/index.js';
+export { CompactFilters, FilterPopover, FilterBar, syncFiltersToUrl } from './filters/index.js';
 export * from './file-browser/index.js';
 export * from './adapters/storage/index.js';
 export * from './adapters/ai/index.js';

package/dist/index.js

@@ -12,6 +12,7 @@ export { buildTestId } from './helper/testid.js';
 export { ALL_COUNTRY_CODES, COUNTRY_NAMES } from './forms/market/country-data.js';
 export { Market } from './forms/market/market.js';
 export { countryCodeToFlagEmoji } from './forms/market/flag-emoji.js';
+export { defaultDatePresets, toIsoDate, fromIsoDate } from './filters/date-presets.js';
 // ============================================================================
 // Helper utilities
 // ============================================================================
@@ -25,6 +26,7 @@ export { default as Button } from './button/Button.svelte';
 // Modal
 export { default as Modal } from './modal/Modal.svelte';
 export { default as ModalFooter } from './modal/ModalFooter.svelte';
+export { default as ConfirmDialog } from './modal/ConfirmDialog.svelte';
 // Pipeline
 export { default as Pipeline } from './pipeline/Pipeline.svelte';
 export { pipelineVariants } from './pipeline/pipeline.js';
@@ -50,7 +52,10 @@ export { default as TabContent } from './layout/tabs/TabContent.svelte';
 export { default as TabGroup } from './layout/tabs/TabGroup.svelte';
 // Elements - Table
 export { default as Table } from './layout/table/Table.svelte';
-export { default as Cells } from './layout/table/Cells.svelte';
+// Cells is a collection of pre-built table-cell snippets. Consumers use
+// them via namespace import: `import { Cells } from '@makolabs/ripple'`
+// then `{#snippet cell(row, key)} {@render Cells.Currency(row, key)} {/snippet}`.
+export * as Cells from './layout/table/Cells.svelte';
 // Elements - Navbar
 export { default as Navbar } from './layout/navbar/Navbar.svelte';
 // Elements - Sidebar
@@ -59,16 +64,26 @@ export { default as NavItem } from './layout/sidebar/NavItem.svelte';
 export { default as NavGroup } from './layout/sidebar/NavGroup.svelte';
 // Elements - ActivityList
 export { default as ActivityList } from './layout/activity-list/ActivityList.svelte';
+// Elements - Stepper
+export { default as Stepper } from './layout/stepper/Stepper.svelte';
 // Elements - Progress
 export { default as Progress } from './elements/progress/Progress.svelte';
 // Elements - Spinner
 export { default as Spinner } from './elements/spinner/Spinner.svelte';
+// Elements - Skeleton
+export { default as Skeleton } from './elements/skeleton/Skeleton.svelte';
 export { spinner as spinnerVariants } from './elements/spinner/spinner.js';
 // Elements - EmptyState
 export { default as EmptyState } from './elements/empty-state/EmptyState.svelte';
 export { emptyState as emptyStateVariants } from './elements/empty-state/empty-state.js';
 // Elements - Tooltip
 export { default as Tooltip } from './elements/tooltip/Tooltip.svelte';
+// Elements - Popover
+export { default as Popover } from './elements/popover/Popover.svelte';
+// Elements - ComboBox
+export { default as ComboBox } from './elements/combobox/ComboBox.svelte';
+// Elements - ContextMenu
+export { default as ContextMenu } from './elements/context-menu/ContextMenu.svelte';
 // Elements - Accordion
 export { default as Accordion } from './elements/accordion/Accordion.svelte';
 // Chart
@@ -76,8 +91,9 @@ export { default as Chart } from './charts/Chart.svelte';
 // File Upload
 export { default as FileUpload } from './elements/file-upload/FileUpload.svelte';
 export { default as FilesPreview } from './elements/file-upload/FilesPreview.svelte';
-// Toaster: Should be registered in +layout.svelte
-export { default as Toaster } from './sonner/sonner.svelte';
+// Toaster: Should be registered in +layout.svelte.
+// Also exports `toast` function and types for consumers.
+export { Toaster, toast } from './sonner/index.js';
 // AI Components
 export { default as AIChatInterface } from './ai/AIChatInterface.svelte';
 export { default as MermaidRenderer } from './ai/MermaidRenderer.svelte';
@@ -87,11 +103,15 @@ export * from './ai/content-detector.js';
 // Form Component Exports
 export { default as Form } from './forms/Form.svelte';
 export { default as Input } from './forms/Input.svelte';
+export { default as Textarea } from './forms/Textarea.svelte';
+export { default as RadioGroup } from './forms/RadioGroup.svelte';
 export { default as Checkbox } from './forms/Checkbox.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
 export { default as Slider } from './forms/Slider.svelte';
 export { default as NumberInput } from './forms/NumberInput.svelte';
 export { default as DateRange } from './forms/DateRange.svelte';
+export { default as Calendar } from './forms/calendar/Calendar.svelte';
+export { default as DatePicker } from './forms/date-picker/DatePicker.svelte';
 export { default as Tags } from './forms/Tags.svelte';
 export { default as SegmentedControl } from './forms/SegmentedControl.svelte';
 export { default as MarketSelector } from './forms/MarketSelector.svelte';
@@ -113,7 +133,7 @@ export { segmentedTrack, segmentClasses, segmentedLabelClasses } from './forms/s
 // ============================================================================
 // Re-export filters
 // ============================================================================
-export { CompactFilters } from './filters/index.js';
+export { CompactFilters, FilterPopover, FilterBar, syncFiltersToUrl } from './filters/index.js';
 // ============================================================================
 // File Browser and Storage Adapters
 // ============================================================================