@makolabs/ripple 1.9.2 → 1.10.0

package/dist/forms/MarketSelector.svelte

@@ -14,8 +14,12 @@
 		name = '',
 		showFlags = true,
 		label = '',
+		variant = undefined,
+		collapsed = false,
 		appearance = 'surface',
 		orientation = 'horizontal',
+		labelLayout = undefined,
+		labelClass = undefined,
 		color = Color.PRIMARY,
 		size = Size.BASE,
 		compact = false,
@@ -25,6 +29,24 @@
 		testId
 	}: MarketSelectorProps = $props();
 
+	const resolvedAppearance = $derived.by(() => {
+		if (variant === 'default') return 'clarkDefault';
+		if (variant === 'sidebar') return 'clarkSidebar';
+		return appearance;
+	});
+
+	const resolvedLabelLayout = $derived(labelLayout ?? (variant !== undefined ? 'inline' : 'above'));
+
+	const resolvedOrientation = $derived(
+		variant === 'sidebar' && collapsed ? 'vertical' : orientation
+	);
+
+	const resolvedCompact = $derived(variant === 'sidebar' && collapsed ? true : compact);
+
+	const resolvedLabelClass = $derived(
+		labelClass ?? (variant === 'sidebar' && collapsed && label ? 'sr-only' : undefined)
+	);
+
 	const options = $derived.by((): SegmentedOption[] => {
 		return markets.map((code) => ({
 			value: code,
@@ -55,11 +77,13 @@
 		{options}
 		{name}
 		{label}
-		{appearance}
-		{orientation}
+		appearance={resolvedAppearance}
+		orientation={resolvedOrientation}
+		labelLayout={resolvedLabelLayout}
+		labelClass={resolvedLabelClass}
 		{color}
 		{size}
-		{compact}
+		compact={resolvedCompact}
 		{disabled}
 		{testId}
 		onchange={handleChange}

package/dist/forms/SegmentedControl.svelte

@@ -3,7 +3,7 @@
 	import { cn } from '../helper/cls.js';
 	import { buildTestId } from '../helper/testid.js';
 	import { Color, Size } from '../variants.js';
-	import { segmentedTrack, segmentClasses } from './segmented-control.js';
+	import { segmentedLabelClasses, segmentedTrack, segmentClasses } from './segmented-control.js';
 	import type { SegmentedControlProps, VariantColors, VariantSizes } from '../index.js';
 
 	const groupId = `seg-${Math.random().toString(36).slice(2, 11)}`;
@@ -19,6 +19,8 @@
 		color = Color.PRIMARY,
 		size = Size.BASE,
 		compact = false,
+		labelLayout = 'above',
+		labelClass = '',
 		disabled = false,
 		errors = [],
 		onchange = undefined,
@@ -27,13 +29,30 @@
 
 	const hasError = $derived(errors && errors.length > 0);
 
+	const clarkCollapsed = $derived(
+		compact && appearance === 'clarkSidebar' && orientation === 'vertical'
+	);
+
 	const trackClass = $derived(
 		cn(
-			segmentedTrack({ appearance, orientation }),
-			orientation === 'vertical' && compact && 'items-stretch'
+			segmentedTrack({
+				appearance,
+				orientation,
+				clarkCollapsed
+			}),
+			orientation === 'vertical' && compact && appearance !== 'clarkSidebar' && 'items-stretch'
 		)
 	);
 
+	const rootClass = $derived(
+		cn(
+			labelLayout === 'inline' ? 'flex flex-row items-center gap-2' : 'flex flex-col gap-2',
+			className
+		)
+	);
+
+	const labelTextClass = $derived(cn(segmentedLabelClasses(appearance, !!hasError), labelClass));
+
 	async function handleSelect(optionValue: string, optionDisabled: boolean | undefined) {
 		if (disabled || optionDisabled) return;
 		if (optionValue === value) return;
@@ -91,20 +110,19 @@
 			}
 		}
 	}
+
+	const isClark = $derived(appearance === 'clarkDefault' || appearance === 'clarkSidebar');
 </script>
 
-<div class={cn('flex flex-col gap-2', className)}>
-	{#if hasError}
-		<div class="text-danger-500 text-sm">{errors[0]}</div>
-	{/if}
+<div class={rootClass}>
 	{#if label}
-		<span
-			id="{groupId}-label"
-			class={cn('text-sm font-medium', hasError ? 'text-danger-500' : 'text-default-700')}
-		>
+		<span id="{groupId}-label" class={labelTextClass}>
 			{label}
 		</span>
 	{/if}
+	{#if hasError}
+		<div class="text-danger-500 text-sm">{errors[0]}</div>
+	{/if}
 
 	<div
 		class={trackClass}
@@ -134,7 +152,8 @@
 					size: size as VariantSizes,
 					isFirst,
 					isLast,
-					orientation
+					orientation,
+					clarkCollapsed
 				})}
 				data-testid={buildTestId('segmented', 'item', testId, index)}
 				onclick={() => handleSelect(option.value, option.disabled)}
@@ -143,7 +162,13 @@
 				{#if option.prefix}
 					<span class="text-base leading-none" aria-hidden="true">{option.prefix}</span>
 				{/if}
-				<span class:text-sm={size === Size.XS || size === Size.SM} class:sr-only={compact}>
+				<span
+					class={cn(
+						!compact && (size === Size.XS || size === Size.SM) && !isClark && 'text-sm',
+						isClark && !compact && 'text-xs font-medium',
+						compact && 'sr-only'
+					)}
+				>
 					{option.label}
 				</span>
 			</button>

package/dist/forms/form-types.d.ts

@@ -180,13 +180,20 @@ export type SegmentedControlProps = {
     name?: string;
     label?: string;
     class?: ClassValue;
-    /** Light track (e.g. page toolbar) vs dark track (e.g. sidebar) */
-    appearance?: 'surface' | 'inverted';
+    /**
+     * - `surface` / `inverted`: generic Ripple styling (`color` applies).
+     * - `clarkDefault` / `clarkSidebar`: match Clark AR market bar (fixed blue selection, inline-friendly).
+     */
+    appearance?: 'surface' | 'inverted' | 'clarkDefault' | 'clarkSidebar';
     orientation?: 'horizontal' | 'vertical';
     color?: VariantColors;
     size?: VariantSizes;
-    /** Hide label text; keep prefix only (label is `sr-only` for screen readers) */
+    /** Hide segment label text; prefix only (`sr-only`); with Clark sidebar + vertical = collapsed column */
     compact?: boolean;
+    /** Label above the track vs beside the track (Clark uses `inline`) */
+    labelLayout?: 'above' | 'inline';
+    /** Optional class on the visible label (e.g. `sr-only` when collapsed sidebar) */
+    labelClass?: ClassValue;
     disabled?: boolean;
     errors?: string[];
     onchange?: (value: string) => void;

package/dist/forms/market/market-selector-types.d.ts

@@ -1,6 +1,8 @@
 import type { ClassValue } from 'tailwind-variants';
 import type { CountryCode } from './country-data.js';
 import type { VariantColors, VariantSizes } from '../../index.js';
+/** Clark AR toolbar (`default`) vs dark sidebar (`sidebar`) — maps to SegmentedControl Clark appearances. */
+export type MarketSelectorVariant = 'default' | 'sidebar';
 export type MarketSelectorProps = {
     /**
      * Non-empty ordered list of ISO 3166-1 alpha-2 codes to show (e.g. `[Market.DE, Market.GB, Market.CH]`).
@@ -13,8 +15,21 @@ export type MarketSelectorProps = {
     defaultMarket?: CountryCode;
     showFlags?: boolean;
     label?: string;
-    appearance?: 'surface' | 'inverted';
+    /**
+     * Clark AR–style market bar. When set, overrides `appearance` to `clarkDefault` / `clarkSidebar`
+     * and defaults `labelLayout` to `inline` (override with `labelLayout`).
+     */
+    variant?: MarketSelectorVariant;
+    /**
+     * With `variant="sidebar"` only: vertical icon column and `sr-only` segment labels (Clark collapsed sidebar).
+     */
+    collapsed?: boolean;
+    appearance?: 'surface' | 'inverted' | 'clarkDefault' | 'clarkSidebar';
     orientation?: 'horizontal' | 'vertical';
+    /** Label above vs beside the track (Clark uses `inline` via `variant`). */
+    labelLayout?: 'above' | 'inline';
+    /** Extra classes on the visible label (e.g. override default `sr-only` when collapsed). */
+    labelClass?: ClassValue;
     color?: VariantColors;
     size?: VariantSizes;
     compact?: boolean;

package/dist/forms/segmented-control.d.ts

@@ -1,39 +1,72 @@
 import type { VariantColors, VariantSizes } from '../index.js';
+/** @see SegmentedControlProps['appearance'] */
+export type SegmentAppearance = 'surface' | 'inverted' | 'clarkDefault' | 'clarkSidebar';
 export declare const segmentedTrack: import("tailwind-variants").TVReturnType<{
     appearance: {
         surface: string;
         inverted: string;
+        /** Clark (light toolbar): flush segments, gray border, white track */
+        clarkDefault: string;
+        /** Clark (dark sidebar): translucent track */
+        clarkSidebar: string;
     };
     orientation: {
         horizontal: string;
         vertical: string;
     };
-}, undefined, "inline-flex overflow-hidden rounded-lg border p-0.5", {
+    /** Collapsed sidebar column layout (Clark) */
+    clarkCollapsed: {
+        true: string;
+        false: string;
+    };
+}, undefined, "inline-flex overflow-hidden rounded-lg border", {
     appearance: {
         surface: string;
         inverted: string;
+        /** Clark (light toolbar): flush segments, gray border, white track */
+        clarkDefault: string;
+        /** Clark (dark sidebar): translucent track */
+        clarkSidebar: string;
     };
     orientation: {
         horizontal: string;
         vertical: string;
     };
+    /** Collapsed sidebar column layout (Clark) */
+    clarkCollapsed: {
+        true: string;
+        false: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     appearance: {
         surface: string;
         inverted: string;
+        /** Clark (light toolbar): flush segments, gray border, white track */
+        clarkDefault: string;
+        /** Clark (dark sidebar): translucent track */
+        clarkSidebar: string;
     };
     orientation: {
         horizontal: string;
         vertical: string;
     };
-}, undefined, "inline-flex overflow-hidden rounded-lg border p-0.5", unknown, unknown, undefined>>;
+    /** Collapsed sidebar column layout (Clark) */
+    clarkCollapsed: {
+        true: string;
+        false: string;
+    };
+}, undefined, "inline-flex overflow-hidden rounded-lg border", unknown, unknown, undefined>>;
 export declare function segmentClasses(args: {
     selected: boolean;
     disabled: boolean;
-    appearance: 'surface' | 'inverted';
+    appearance: SegmentAppearance;
     color: VariantColors;
     size: VariantSizes;
     isFirst: boolean;
     isLast: boolean;
     orientation: 'horizontal' | 'vertical';
+    /** Clark sidebar collapsed: stacked segments, smaller padding */
+    clarkCollapsed?: boolean;
 }): string;
+/** Label next to / above the track (Clark uses muted gray or default-300 in sidebar). */
+export declare function segmentedLabelClasses(appearance: SegmentAppearance, hasError: boolean): string;

package/dist/forms/segmented-control.js

@@ -2,20 +2,37 @@ 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 p-0.5',
+    base: 'inline-flex overflow-hidden rounded-lg border',
     variants: {
         appearance: {
-            surface: 'border-default-200 bg-default-50',
-            inverted: 'border-white/20 bg-white/5'
+            surface: 'border-default-200 bg-default-50 p-0.5',
+            inverted: 'border-white/20 bg-white/5 p-0.5',
+            /** Clark (light toolbar): flush segments, gray border, white track */
+            clarkDefault: 'items-center border-gray-300 bg-white p-0',
+            /** Clark (dark sidebar): translucent track */
+            clarkSidebar: 'items-center border-white/20 bg-white/5 p-0'
         },
         orientation: {
             horizontal: 'flex-row',
             vertical: 'w-full flex-col'
+        },
+        /** Collapsed sidebar column layout (Clark) */
+        clarkCollapsed: {
+            true: 'gap-1',
+            false: ''
         }
     },
+    compoundVariants: [
+        {
+            appearance: ['clarkDefault', 'clarkSidebar'],
+            orientation: 'vertical',
+            class: 'items-center'
+        }
+    ],
     defaultVariants: {
         appearance: 'surface',
-        orientation: 'horizontal'
+        orientation: 'horizontal',
+        clarkCollapsed: false
     }
 });
 const selectedByColor = {
@@ -35,8 +52,31 @@ const segmentSize = {
     [Size.XL]: 'gap-2 px-4 py-2.5 text-lg',
     [Size.XXL]: 'gap-2 px-5 py-3 text-xl'
 };
+function isClark(appearance) {
+    return appearance === 'clarkDefault' || appearance === 'clarkSidebar';
+}
 export function segmentClasses(args) {
-    const { selected, disabled, appearance, color, size, isFirst, isLast, orientation } = args;
+    const { selected, disabled, appearance, color, size, isFirst, isLast, orientation, clarkCollapsed } = args;
+    if (isClark(appearance)) {
+        const isSidebar = appearance === 'clarkSidebar';
+        const rounding = clarkCollapsed && isSidebar
+            ? 'rounded-md'
+            : orientation === 'horizontal'
+                ? cn(isFirst && 'rounded-l-lg', isLast && 'rounded-r-lg')
+                : cn(isFirst && 'rounded-t-lg', isLast && 'rounded-b-lg');
+        const clarkPad = clarkCollapsed && isSidebar ? 'justify-center px-2 py-1.5' : 'gap-1.5 px-3 py-1.5';
+        const clarkBase = cn('group relative flex cursor-pointer items-center transition-all duration-150', clarkPad, 'focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none', isSidebar ? 'focus-visible:ring-offset-0' : 'focus-visible:ring-offset-2', rounding, disabled && 'cursor-not-allowed opacity-50');
+        if (disabled) {
+            return cn(clarkBase, 'text-default-400');
+        }
+        if (selected) {
+            return cn(clarkBase, 'bg-blue-600 text-white');
+        }
+        if (appearance === 'clarkDefault') {
+            return cn(clarkBase, 'bg-white text-gray-600 hover:bg-gray-50');
+        }
+        return cn(clarkBase, 'text-default-200 hover:bg-white/10');
+    }
     const rounding = orientation === 'horizontal'
         ? cn(isFirst && 'rounded-l-md', isLast && 'rounded-r-md')
         : cn(isFirst && 'rounded-t-md', isLast && 'rounded-b-md');
@@ -48,7 +88,20 @@ export function segmentClasses(args) {
         return cn(base, selectedByColor[color]);
     }
     if (appearance === 'surface') {
-        return cn(base, 'text-default-700 hover:bg-white/90', 'bg-transparent');
+        return cn(base, 'bg-transparent text-default-700 hover:bg-white/90');
+    }
+    return cn(base, 'bg-transparent text-default-200 hover:bg-white/10');
+}
+/** Label next to / above the track (Clark uses muted gray or default-300 in sidebar). */
+export function segmentedLabelClasses(appearance, hasError) {
+    if (hasError) {
+        return 'text-sm font-medium text-danger-500';
+    }
+    if (appearance === 'clarkDefault') {
+        return 'text-sm text-gray-500';
+    }
+    if (appearance === 'clarkSidebar') {
+        return 'text-xs text-default-300';
     }
-    return cn(base, 'text-default-200 hover:bg-white/10', 'bg-transparent');
+    return cn('text-sm font-medium', 'text-default-700');
 }

package/dist/index.d.ts

@@ -34,7 +34,7 @@ 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';
 export { Market } from './forms/market/market.js';
-export type { MarketSelectorProps } from './forms/market/market-selector-types.js';
+export type { MarketSelectorProps, MarketSelectorVariant } from './forms/market/market-selector-types.js';
 export { countryCodeToFlagEmoji } from './forms/market/flag-emoji.js';
 export type { ProgressSegment, ProgressProps } from './elements/progress/progress-types.js';
 export type { AccordionProps } from './elements/accordion/accordion-types.js';
@@ -106,7 +106,8 @@ export { metricCard } from './layout/card/metric-card.js';
 export { rankedCard } from './layout/card/ranked-card.js';
 export { activityList } from './layout/activity-list/activity-list.js';
 export { slider } from './forms/slider.js';
-export { segmentedTrack, segmentClasses } from './forms/segmented-control.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 * from './file-browser/index.js';
 export * from './adapters/storage/index.js';

package/dist/index.js

@@ -103,7 +103,7 @@ export { metricCard } from './layout/card/metric-card.js';
 export { rankedCard } from './layout/card/ranked-card.js';
 export { activityList } from './layout/activity-list/activity-list.js';
 export { slider } from './forms/slider.js';
-export { segmentedTrack, segmentClasses } from './forms/segmented-control.js';
+export { segmentedTrack, segmentClasses, segmentedLabelClasses } from './forms/segmented-control.js';
 // ============================================================================
 // Re-export filters
 // ============================================================================

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "1.9.2",
+	"version": "1.10.0",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {