@makolabs/ripple 3.0.0 → 3.0.2

package/dist/forms/month-picker/MonthPicker.svelte

@@ -0,0 +1,299 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import { Size } from '../../variants.js';
+	import { formSizeTokens } from '../form-size.js';
+	import Popover from '../../elements/popover/Popover.svelte';
+	import type { MonthPickerProps } from './month-picker-types.js';
+
+	let {
+		name,
+		id = name,
+		label,
+		value = $bindable<Date | null>(null),
+		placeholder = 'Select month',
+		minDate,
+		maxDate,
+		clearable = true,
+		disabled = false,
+		size = Size.MD,
+		errors = [],
+		class: className = '',
+		onselect,
+		testId
+	}: MonthPickerProps = $props();
+
+	let open = $state(false);
+	let listEl = $state<HTMLDivElement | undefined>();
+	const tokens = $derived(formSizeTokens[size]);
+	const hasErrors = $derived(errors.length > 0);
+
+	const MONTH_NAMES = [
+		'January',
+		'February',
+		'March',
+		'April',
+		'May',
+		'June',
+		'July',
+		'August',
+		'September',
+		'October',
+		'November',
+		'December'
+	] as const;
+
+	const MONTH_SHORT = [
+		'Jan',
+		'Feb',
+		'Mar',
+		'Apr',
+		'May',
+		'Jun',
+		'Jul',
+		'Aug',
+		'Sep',
+		'Oct',
+		'Nov',
+		'Dec'
+	] as const;
+
+	const display = $derived(value ? `${MONTH_NAMES[value.getMonth()]} ${value.getFullYear()}` : '');
+
+	// Build a flat list of months spanning a range of years. Default:
+	// 5 years before → 5 years after the anchor (selected or today).
+	const RANGE_YEARS = 5;
+	type MonthEntry = { year: number; month: number; date: Date; label: string; disabled: boolean };
+
+	const anchor = $derived(value ?? new Date());
+	const startYear = $derived(minDate ? minDate.getFullYear() : anchor.getFullYear() - RANGE_YEARS);
+	const endYear = $derived(maxDate ? maxDate.getFullYear() : anchor.getFullYear() + RANGE_YEARS);
+
+	const months = $derived.by<MonthEntry[]>(() => {
+		const out: MonthEntry[] = [];
+		for (let y = startYear; y <= endYear; y++) {
+			for (let m = 0; m < 12; m++) {
+				const d = new Date(y, m, 1);
+				let disabled = false;
+				if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), 1)) disabled = true;
+				if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), 1)) disabled = true;
+				out.push({
+					year: y,
+					month: m,
+					date: d,
+					label: MONTH_NAMES[m],
+					disabled
+				});
+			}
+		}
+		return out;
+	});
+
+	// Unique sorted years and a fast lookup by year*12+month key.
+	const years = $derived([...new Set(months.map((e) => e.year))]);
+	const monthMap = $derived(new Map(months.map((e) => [e.year * 12 + e.month, e])));
+
+	function isSelected(entry: MonthEntry): boolean {
+		return !!value && value.getFullYear() === entry.year && value.getMonth() === entry.month;
+	}
+
+	function isCurrent(entry: MonthEntry): boolean {
+		const now = new Date();
+		return entry.year === now.getFullYear() && entry.month === now.getMonth();
+	}
+
+	function pick(entry: MonthEntry) {
+		if (entry.disabled) return;
+		value = entry.date;
+		onselect?.(entry.date);
+		open = false;
+	}
+
+	function clear(e: MouseEvent) {
+		e.stopPropagation();
+		value = null;
+		open = false;
+		onselect?.(null);
+	}
+
+	function setThisMonth() {
+		const now = new Date();
+		value = new Date(now.getFullYear(), now.getMonth(), 1);
+		onselect?.(value);
+		open = false;
+	}
+
+	// Auto-scroll to the selected (or current) month when the panel opens.
+	$effect(() => {
+		if (!open || !listEl) return;
+		requestAnimationFrame(() => {
+			const target =
+				listEl?.querySelector('[data-selected="true"]') ??
+				listEl?.querySelector('[data-current="true"]');
+			target?.scrollIntoView({ block: 'center' });
+		});
+	});
+</script>
+
+<div class={cn('w-full', className)}>
+	{#if label}
+		<label for={id} class="text-default-700 mb-1 block text-sm font-medium">
+			{label}
+		</label>
+	{/if}
+
+	<input type="hidden" {name} value={value?.toISOString() ?? ''} />
+
+	<Popover trigger="manual" bind:open placement="bottom" {disabled}>
+		<button
+			{id}
+			type="button"
+			{disabled}
+			onclick={() => {
+				if (!disabled) open = !open;
+			}}
+			aria-haspopup="dialog"
+			aria-expanded={open}
+			class={cn(
+				'flex w-full items-center border bg-white transition-colors',
+				'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+				tokens.height,
+				tokens.padX,
+				tokens.text,
+				tokens.gap,
+				tokens.radius,
+				tokens.shadow,
+				hasErrors
+					? 'border-danger-300 focus-visible:border-danger-500 focus-visible:ring-danger-500'
+					: 'border-default-300 focus-visible:border-primary-500 focus-visible:ring-primary-500',
+				disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+			)}
+			data-testid={buildTestId('month-picker', undefined, testId)}
+		>
+			<span class={cn('flex-1 text-left', !display && 'text-default-400')}>
+				{display || placeholder}
+			</span>
+			{#if clearable && value && !disabled}
+				<span
+					role="button"
+					tabindex="-1"
+					onclick={clear}
+					onkeydown={(e) => {
+						if (e.key === 'Enter') clear(e as unknown as MouseEvent);
+					}}
+					aria-label="Clear month"
+					class={cn(
+						'text-default-400 hover:text-default-700 flex cursor-pointer items-center justify-center rounded',
+						tokens.iconSize
+					)}
+				>
+					<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+						<path
+							d="M3 3l6 6M9 3l-6 6"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</span>
+			{/if}
+			<svg
+				class={cn('text-default-400', tokens.iconSize)}
+				viewBox="0 0 20 20"
+				fill="currentColor"
+				aria-hidden="true"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2zM4.75 5.5c-.69 0-1.25.56-1.25 1.25V8h13V6.75c0-.69-.56-1.25-1.25-1.25H4.75zM16.5 9.5h-13v5.75c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25V9.5z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		</button>
+
+		{#snippet content({ close })}
+			{@render monthGrid(close)}
+		{/snippet}
+	</Popover>
+
+	{#if hasErrors}
+		<ul class="mt-1 space-y-0.5" role="alert">
+			{#each errors as error (error)}
+				<li class="text-danger-600 text-xs">{error}</li>
+			{/each}
+		</ul>
+	{/if}
+</div>
+
+{#snippet monthGrid(close: () => void)}
+	<div class="flex w-full flex-col sm:w-56">
+		<div
+			bind:this={listEl}
+			class="max-h-72 overflow-y-auto [scrollbar-width:none] sm:max-h-72 [&::-webkit-scrollbar]:hidden"
+		>
+			{#each years as year (year)}
+				{@const yearSelected = value?.getFullYear() === year}
+				<div
+					class={cn(
+						'border-default-200 sticky top-0 z-10 border-b px-3 py-1.5 text-xs font-bold',
+						yearSelected ? 'bg-primary-50 text-primary-700' : 'bg-default-50 text-default-800'
+					)}
+					data-year={year}
+				>
+					{year}
+				</div>
+				<div class="grid grid-cols-4 gap-0.5 p-1.5">
+					{#each MONTH_SHORT as monthLabel, m (m)}
+						{@const entry = monthMap.get(year * 12 + m)}
+						{@const sel = entry ? isSelected(entry) : false}
+						{@const cur = entry ? isCurrent(entry) : false}
+						{@const dis = entry?.disabled ?? true}
+						<button
+							type="button"
+							data-month={m}
+							data-selected={sel || undefined}
+							data-current={cur || undefined}
+							onclick={() => entry && pick(entry)}
+							disabled={dis}
+							class={cn(
+								'cursor-pointer rounded px-1 py-2 text-xs font-medium transition-colors sm:py-1',
+								sel
+									? 'bg-primary-500 text-white'
+									: cur
+										? 'text-primary-600 bg-primary-50 ring-primary-300 ring-1'
+										: 'text-default-600 hover:bg-default-100',
+								dis && 'text-default-300 cursor-not-allowed'
+							)}
+						>
+							{monthLabel}
+						</button>
+					{/each}
+				</div>
+			{/each}
+		</div>
+
+		<div class="border-default-200 flex items-center justify-between border-t px-3 py-2">
+			{#if clearable}
+				<button
+					type="button"
+					onclick={(e) => {
+						clear(e);
+						close();
+					}}
+					class="text-primary-600 cursor-pointer text-xs font-medium hover:underline"
+				>
+					Clear
+				</button>
+			{:else}
+				<span></span>
+			{/if}
+			<button
+				type="button"
+				onclick={setThisMonth}
+				class="text-primary-600 cursor-pointer text-xs font-medium hover:underline"
+			>
+				This month
+			</button>
+		</div>
+	</div>
+{/snippet}

package/dist/forms/month-picker/MonthPicker.svelte.d.ts

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

package/dist/forms/month-picker/month-picker-types.d.ts

@@ -0,0 +1,22 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { VariantSizes } from '../../index.js';
+export type MonthPickerProps = {
+    name: string;
+    id?: string;
+    label?: string;
+    /** Bindable selected month. Always the 1st of the month, or null. */
+    value?: Date | null;
+    placeholder?: string;
+    /** Earliest selectable month (inclusive, day is ignored). */
+    minDate?: Date;
+    /** Latest selectable month (inclusive, day is ignored). */
+    maxDate?: Date;
+    /** Show a × to clear the selection. @default true */
+    clearable?: boolean;
+    disabled?: boolean;
+    size?: VariantSizes;
+    errors?: string[];
+    class?: ClassValue;
+    onselect?: (value: Date | null) => void;
+    testId?: string;
+};

package/dist/forms/month-picker/month-picker-types.js

@@ -0,0 +1 @@
+export {};

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

@@ -12,7 +12,7 @@ export declare const segmentedTrack: import("tailwind-variants").TVReturnType<{
         vertical: string;
         auto: string;
     };
-}, undefined, "inline-flex max-w-full overflow-x-auto rounded-lg border [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", {
+}, undefined, "flex max-w-full overflow-x-auto rounded-lg border sm:inline-flex [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", {
     appearance: {
         surface: string;
         inverted: string;
@@ -34,7 +34,7 @@ export declare const segmentedTrack: import("tailwind-variants").TVReturnType<{
         vertical: string;
         auto: string;
     };
-}, undefined, "inline-flex max-w-full overflow-x-auto rounded-lg border [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", unknown, unknown, undefined>>;
+}, undefined, "flex max-w-full overflow-x-auto rounded-lg border sm:inline-flex [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", unknown, unknown, undefined>>;
 export declare function segmentClasses(args: {
     selected: boolean;
     disabled: boolean;

package/dist/forms/segmented-control.js

@@ -1,10 +1,13 @@
 import { tv } from 'tailwind-variants';
 import { cn } from '../helper/cls.js';
-import { Color, Size } from '../variants.js';
+import { Color } from '../variants.js';
+import { formSizeTokens } from './form-size.js';
 export const segmentedTrack = tv({
-    // `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',
+    // Below `sm`, take full width so the control fills its container on
+    // mobile. Above `sm`, shrink to content via `inline-flex`. Either
+    // way, `overflow-x-auto` + hidden scrollbar lets a long segment row
+    // swipe horizontally without a visible bar.
+    base: 'flex max-w-full overflow-x-auto rounded-lg border sm:inline-flex [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
     variants: {
         appearance: {
             surface: 'border-default-200 bg-white p-0',
@@ -36,28 +39,28 @@ const selectedByColor = {
     [Color.WARNING]: 'bg-warning-600 text-white shadow-sm',
     [Color.DANGER]: 'bg-danger-600 text-white shadow-sm'
 };
-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.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'
-};
+// Pull padding/text/gap from the shared form-size tokens so a
+// SegmentedControl at `size="md"` coordinates with Input / Select /
+// DateRange / etc. at the same tier. Segments don't use `height` —
+// their height falls out of text + padding.
+function segmentSize(size) {
+    const t = formSizeTokens[size];
+    return `${t.gap} ${t.padX} ${t.padY} ${t.text}`;
+}
 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 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');
+        const pillBase = cn('flex cursor-pointer items-center justify-center rounded-full font-medium transition-colors duration-150 flex-1 whitespace-nowrap sm:flex-initial sm:shrink-0', '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 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', 
+    const base = cn('flex cursor-pointer items-center justify-center font-medium transition-colors duration-150 flex-1 whitespace-nowrap sm:flex-initial sm:shrink-0', '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');
+    appearance === 'inverted' && 'rounded-md', segmentSize(size), disabled && 'cursor-not-allowed opacity-50');
     if (disabled) {
         return cn(base, 'text-default-400');
     }

package/dist/forms/slider.js

@@ -1,62 +1,69 @@
 import { tv } from 'tailwind-variants';
 import { Size } from '../variants.js';
+import { formSizeTokens } from './form-size.js';
+// Track/thumb dimensions are Slider-specific — a "size" for a slider
+// means the physical rail, not an input height. We keep these tuned per
+// tier but pull `text` classes from the shared form-size tokens so a
+// Slider's label reads the same size as an adjacent Input's text.
+const textFor = (size) => formSizeTokens[size].text;
 export const slider = tv({
     slots: {
         base: 'relative w-full',
-        track: 'absolute h-2 w-full rounded-full bg-default-200 cursor-pointer',
+        track: 'absolute w-full rounded-full bg-default-200 cursor-pointer',
         range: 'absolute h-full rounded-full bg-primary-500',
         thumb: [
             'absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white border-2 border-primary-500',
             'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
             'hover:scale-110 transition-transform cursor-pointer'
         ],
-        mark: 'absolute text-sm text-default-500 -translate-x-1/2',
-        label: 'mb-2 block text-sm font-medium text-default-700',
-        value: 'mt-1 text-sm text-default-500'
+        mark: 'absolute text-default-500 -translate-x-1/2',
+        label: 'mb-2 block font-medium text-default-700',
+        value: 'mt-1 text-default-500'
     },
     variants: {
         size: {
             [Size.XS]: {
-                track: 'h-1',
-                thumb: 'w-3 h-3',
-                mark: 'text-xs top-4',
-                label: 'text-xs',
-                value: 'text-xs'
+                track: 'h-0.5',
+                thumb: 'w-2.5 h-2.5',
+                mark: `${textFor(Size.XS)} top-3`,
+                label: textFor(Size.XS),
+                value: textFor(Size.XS)
             },
             [Size.SM]: {
                 track: 'h-1',
                 thumb: 'w-3 h-3',
-                mark: 'text-xs top-4',
-                label: 'text-xs',
-                value: 'text-xs'
+                mark: `${textFor(Size.SM)} top-4`,
+                label: textFor(Size.SM),
+                value: textFor(Size.SM)
             },
             [Size.MD]: {
-                track: 'h-2',
-                thumb: 'w-4 h-4',
-                mark: 'text-sm top-6',
-                label: 'text-sm',
-                value: 'text-sm'
+                track: 'h-1.5',
+                thumb: 'w-3.5 h-3.5',
+                mark: `${textFor(Size.MD)} top-5`,
+                label: textFor(Size.MD),
+                value: textFor(Size.MD)
             },
             [Size.LG]: {
-                track: 'h-3',
-                thumb: 'w-5 h-5',
-                mark: 'text-base top-7',
-                label: 'text-base',
-                value: 'text-base'
+                track: 'h-2',
+                thumb: 'w-4 h-4',
+                mark: `${textFor(Size.LG)} top-6`,
+                label: textFor(Size.LG),
+                value: textFor(Size.LG)
             },
             [Size.XL]: {
                 track: 'h-3',
                 thumb: 'w-5 h-5',
-                mark: 'text-base top-7',
-                label: 'text-base',
-                value: 'text-base'
+                mark: `${textFor(Size.XL)} top-7`,
+                label: textFor(Size.XL),
+                value: textFor(Size.XL)
             },
+            // Form controls cap at xl — see `form-size.ts`.
             [Size.XXL]: {
                 track: 'h-3',
                 thumb: 'w-5 h-5',
-                mark: 'text-base top-7',
-                label: 'text-base',
-                value: 'text-base'
+                mark: `${textFor(Size.XXL)} top-7`,
+                label: textFor(Size.XXL),
+                value: textFor(Size.XXL)
             }
         },
         disabled: {

package/dist/index.d.ts

@@ -51,6 +51,7 @@ export type { TooltipProps, TooltipPlacement, TooltipSize, TooltipVariant } from
 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 { MonthPickerProps } from './forms/month-picker/month-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';
@@ -124,6 +125,7 @@ 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 MonthPicker } from './forms/month-picker/MonthPicker.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';

package/dist/index.js

@@ -112,6 +112,7 @@ 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 MonthPicker } from './forms/month-picker/MonthPicker.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';

package/dist/layout/activity-list/ActivityList.svelte

@@ -115,7 +115,7 @@
 									<div class="mb-1 flex justify-between gap-x-4">
 										<div class="flex flex-wrap items-center gap-2">
 											<button
-												class="text-default-900 text-sm font-medium"
+												class="text-default-900 cursor-pointer text-sm font-medium"
 												onclick={() => onitemclick?.(activityItem, index)}
 											>
 												{activityItem.title}

package/package.json

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