@makolabs/ripple 1.9.1 → 1.10.0

package/dist/forms/MarketSelector.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { Color, Size } from '../variants.js';
+	import SegmentedControl from './SegmentedControl.svelte';
+	import { COUNTRY_NAMES } from './market/country-data.js';
+	import { countryCodeToFlagEmoji } from './market/flag-emoji.js';
+	import type { CountryCode } from './market/country-data.js';
+	import type { MarketSelectorProps } from './market/market-selector-types.js';
+	import type { SegmentedOption } from '../index.js';
+
+	let {
+		markets,
+		selectedMarket = $bindable(),
+		defaultMarket,
+		name = '',
+		showFlags = true,
+		label = '',
+		variant = undefined,
+		collapsed = false,
+		appearance = 'surface',
+		orientation = 'horizontal',
+		labelLayout = undefined,
+		labelClass = undefined,
+		color = Color.PRIMARY,
+		size = Size.BASE,
+		compact = false,
+		disabled = false,
+		class: className = '',
+		onchange = undefined,
+		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,
+			label: code,
+			title: COUNTRY_NAMES[code],
+			prefix: showFlags ? countryCodeToFlagEmoji(code) : undefined
+		}));
+	});
+
+	$effect.pre(() => {
+		const m = markets;
+		if (m.length === 0) return;
+		const cur = selectedMarket;
+		if (cur !== undefined && m.includes(cur as CountryCode)) return;
+		selectedMarket =
+			defaultMarket !== undefined && m.includes(defaultMarket) ? defaultMarket : m[0];
+	});
+
+	function handleChange(v: string) {
+		onchange?.(v as CountryCode);
+	}
+</script>
+
+{#if markets.length > 0}
+	<SegmentedControl
+		class={className}
+		bind:value={selectedMarket}
+		{options}
+		{name}
+		{label}
+		appearance={resolvedAppearance}
+		orientation={resolvedOrientation}
+		labelLayout={resolvedLabelLayout}
+		labelClass={resolvedLabelClass}
+		{color}
+		{size}
+		compact={resolvedCompact}
+		{disabled}
+		{testId}
+		onchange={handleChange}
+	/>
+{/if}

package/dist/forms/MarketSelector.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MarketSelectorProps } from './market/market-selector-types.js';
+declare const MarketSelector: import("svelte").Component<MarketSelectorProps, {}, "selectedMarket">;
+type MarketSelector = ReturnType<typeof MarketSelector>;
+export default MarketSelector;

package/dist/forms/SegmentedControl.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
+	import { Color, Size } from '../variants.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)}`;
+
+	let {
+		options = [],
+		value = $bindable(options.length > 0 ? options[0].value : ''),
+		name = '',
+		label = '',
+		class: className = '',
+		appearance = 'surface',
+		orientation = 'horizontal',
+		color = Color.PRIMARY,
+		size = Size.BASE,
+		compact = false,
+		labelLayout = 'above',
+		labelClass = '',
+		disabled = false,
+		errors = [],
+		onchange = undefined,
+		testId
+	}: SegmentedControlProps = $props();
+
+	const hasError = $derived(errors && errors.length > 0);
+
+	const clarkCollapsed = $derived(
+		compact && appearance === 'clarkSidebar' && orientation === 'vertical'
+	);
+
+	const trackClass = $derived(
+		cn(
+			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;
+		value = optionValue;
+		onchange?.(optionValue);
+		await tick();
+		const idx = options.findIndex((o) => o.value === optionValue);
+		if (idx >= 0 && typeof document !== 'undefined') {
+			document.getElementById(`${groupId}-seg-${idx}`)?.focus();
+		}
+	}
+
+	function resolvedTitle(option: (typeof options)[number]): string {
+		return option.title ?? option.label;
+	}
+
+	function isOptionDisabled(option: (typeof options)[number]): boolean {
+		return disabled || !!option.disabled;
+	}
+
+	function moveSelection(fromIndex: number, delta: 1 | -1) {
+		const len = options.length;
+		if (len === 0) return;
+		let i = fromIndex;
+		for (let step = 0; step < len; step++) {
+			i = (i + delta + len) % len;
+			const opt = options[i];
+			if (!isOptionDisabled(opt)) {
+				void handleSelect(opt.value, opt.disabled);
+				return;
+			}
+		}
+	}
+
+	function handleSegmentKeydown(e: KeyboardEvent, index: number) {
+		const forward = orientation === 'horizontal' ? e.key === 'ArrowRight' : e.key === 'ArrowDown';
+		const backward = orientation === 'horizontal' ? e.key === 'ArrowLeft' : e.key === 'ArrowUp';
+		if (forward) {
+			e.preventDefault();
+			moveSelection(index, 1);
+		} else if (backward) {
+			e.preventDefault();
+			moveSelection(index, -1);
+		} else if (e.key === 'Home') {
+			e.preventDefault();
+			const first = options.findIndex((o) => !isOptionDisabled(o));
+			if (first >= 0) void handleSelect(options[first].value, options[first].disabled);
+		} else if (e.key === 'End') {
+			e.preventDefault();
+			for (let i = options.length - 1; i >= 0; i--) {
+				if (!isOptionDisabled(options[i])) {
+					void handleSelect(options[i].value, options[i].disabled);
+					return;
+				}
+			}
+		}
+	}
+
+	const isClark = $derived(appearance === 'clarkDefault' || appearance === 'clarkSidebar');
+</script>
+
+<div class={rootClass}>
+	{#if label}
+		<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}
+		role="radiogroup"
+		aria-labelledby={label ? `${groupId}-label` : undefined}
+		aria-orientation={orientation === 'vertical' ? 'vertical' : 'horizontal'}
+		data-testid={buildTestId('segmented', undefined, testId)}
+	>
+		{#each options as option, index (option.value)}
+			{@const isSelected = value === option.value}
+			{@const isFirst = index === 0}
+			{@const isLast = index === options.length - 1}
+			{@const segDisabled = disabled || option.disabled}
+			<button
+				id="{groupId}-seg-{index}"
+				type="button"
+				role="radio"
+				aria-checked={isSelected}
+				aria-disabled={segDisabled ? 'true' : undefined}
+				tabindex={segDisabled ? -1 : isSelected ? 0 : -1}
+				title={resolvedTitle(option)}
+				class={segmentClasses({
+					selected: isSelected,
+					disabled: !!segDisabled,
+					appearance,
+					color: color as VariantColors,
+					size: size as VariantSizes,
+					isFirst,
+					isLast,
+					orientation,
+					clarkCollapsed
+				})}
+				data-testid={buildTestId('segmented', 'item', testId, index)}
+				onclick={() => handleSelect(option.value, option.disabled)}
+				onkeydown={(e) => handleSegmentKeydown(e, index)}
+			>
+				{#if option.prefix}
+					<span class="text-base leading-none" aria-hidden="true">{option.prefix}</span>
+				{/if}
+				<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>
+		{/each}
+	</div>
+</div>
+
+{#if name}
+	<input type="hidden" {name} {value} />
+{/if}

package/dist/forms/SegmentedControl.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SegmentedControlProps } from '../index.js';
+declare const SegmentedControl: import("svelte").Component<SegmentedControlProps, {}, "value">;
+type SegmentedControl = ReturnType<typeof SegmentedControl>;
+export default SegmentedControl;

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

@@ -166,3 +166,36 @@ export type RadioPillProps = {
     onchange?: (value: string) => void;
     testId?: string;
 };
+/** Single segment in a fused SegmentedControl bar (not TabGroup — no panels). */
+export type SegmentedOption = RadioOption & {
+    /** Shown before label, e.g. flag emoji */
+    prefix?: string;
+    /** `title` on the segment button */
+    title?: string;
+    disabled?: boolean;
+};
+export type SegmentedControlProps = {
+    options: SegmentedOption[];
+    value?: string;
+    name?: string;
+    label?: string;
+    class?: ClassValue;
+    /**
+     * - `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 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;
+    testId?: string;
+};

package/dist/forms/market/country-data.d.ts

@@ -0,0 +1,5 @@
+/** ISO 3166-1 alpha-2 codes (generated from ISO dataset). */
+export declare const ALL_COUNTRY_CODES: readonly ["AD", "AE", "AF", "AG", "AI", "AL", "AM", "AO", "AQ", "AR", "AS", "AT", "AU", "AW", "AX", "AZ", "BA", "BB", "BD", "BE", "BF", "BG", "BH", "BI", "BJ", "BL", "BM", "BN", "BO", "BQ", "BR", "BS", "BT", "BV", "BW", "BY", "BZ", "CA", "CC", "CD", "CF", "CG", "CH", "CI", "CK", "CL", "CM", "CN", "CO", "CR", "CU", "CV", "CW", "CX", "CY", "CZ", "DE", "DJ", "DK", "DM", "DO", "DZ", "EC", "EE", "EG", "EH", "ER", "ES", "ET", "FI", "FJ", "FK", "FM", "FO", "FR", "GA", "GB", "GD", "GE", "GF", "GG", "GH", "GI", "GL", "GM", "GN", "GP", "GQ", "GR", "GS", "GT", "GU", "GW", "GY", "HK", "HM", "HN", "HR", "HT", "HU", "ID", "IE", "IL", "IM", "IN", "IO", "IQ", "IR", "IS", "IT", "JE", "JM", "JO", "JP", "KE", "KG", "KH", "KI", "KM", "KN", "KP", "KR", "KW", "KY", "KZ", "LA", "LB", "LC", "LI", "LK", "LR", "LS", "LT", "LU", "LV", "LY", "MA", "MC", "MD", "ME", "MF", "MG", "MH", "MK", "ML", "MM", "MN", "MO", "MP", "MQ", "MR", "MS", "MT", "MU", "MV", "MW", "MX", "MY", "MZ", "NA", "NC", "NE", "NF", "NG", "NI", "NL", "NO", "NP", "NR", "NU", "NZ", "OM", "PA", "PE", "PF", "PG", "PH", "PK", "PL", "PM", "PN", "PR", "PS", "PT", "PW", "PY", "QA", "RE", "RO", "RS", "RU", "RW", "SA", "SB", "SC", "SD", "SE", "SG", "SH", "SI", "SJ", "SK", "SL", "SM", "SN", "SO", "SR", "SS", "ST", "SV", "SX", "SY", "SZ", "TC", "TD", "TF", "TG", "TH", "TJ", "TK", "TL", "TM", "TN", "TO", "TR", "TT", "TV", "TW", "TZ", "UA", "UG", "UM", "US", "UY", "UZ", "VA", "VC", "VE", "VG", "VI", "VN", "VU", "WF", "WS", "YE", "YT", "ZA", "ZM", "ZW"];
+export type CountryCode = (typeof ALL_COUNTRY_CODES)[number];
+/** English short names (ISO list). */
+export declare const COUNTRY_NAMES: Record<CountryCode, string>;