@makolabs/ripple 3.0.0 → 3.0.2

package/dist/forms/calendar/Calendar.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
 	import { buildTestId } from '../../helper/testid.js';
+	import { Size } from '../../variants.js';
+	import type { VariantSizes } from '../../index.js';
 	import type { CalendarProps } from './calendar-types.js';
 
 	let {
@@ -14,11 +16,91 @@
 		weekStartsOn = 1,
 		hideHeader = false,
 		disabled = false,
+		size = Size.MD,
 		class: className = '',
 		onselect,
 		testId
 	}: CalendarProps = $props();
 
+	// Calendar dimensions don't map cleanly onto form-size tokens — a
+	// date grid's "size" means cell + panel width, not input height. So
+	// we maintain a dedicated ladder here, tuned so a Calendar at the
+	// same `size` as its enclosing DatePicker feels proportional.
+	type CalendarDensity = {
+		panel: string;
+		padding: string;
+		cell: string;
+		navBtn: string;
+		navIcon: string;
+		monthText: string;
+		dayHeaderText: string;
+		cellText: string;
+	};
+	const calendarSize: Record<VariantSizes, CalendarDensity> = {
+		[Size.XS]: {
+			panel: 'w-48',
+			padding: 'p-2',
+			cell: 'size-6',
+			navBtn: 'size-5',
+			navIcon: 'size-3',
+			monthText: 'text-xs',
+			dayHeaderText: 'text-[9px]',
+			cellText: 'text-[10px]'
+		},
+		[Size.SM]: {
+			panel: 'w-56',
+			padding: 'p-2.5',
+			cell: 'size-7',
+			navBtn: 'size-6',
+			navIcon: 'size-3.5',
+			monthText: 'text-xs',
+			dayHeaderText: 'text-[10px]',
+			cellText: 'text-xs'
+		},
+		[Size.MD]: {
+			panel: 'w-64',
+			padding: 'p-3',
+			cell: 'size-8',
+			navBtn: 'size-7',
+			navIcon: 'size-4',
+			monthText: 'text-sm',
+			dayHeaderText: 'text-[10px]',
+			cellText: 'text-xs'
+		},
+		[Size.LG]: {
+			panel: 'w-72',
+			padding: 'p-3.5',
+			cell: 'size-9',
+			navBtn: 'size-8',
+			navIcon: 'size-4',
+			monthText: 'text-base',
+			dayHeaderText: 'text-xs',
+			cellText: 'text-sm'
+		},
+		[Size.XL]: {
+			panel: 'w-80',
+			padding: 'p-4',
+			cell: 'size-10',
+			navBtn: 'size-9',
+			navIcon: 'size-5',
+			monthText: 'text-lg',
+			dayHeaderText: 'text-xs',
+			cellText: 'text-sm'
+		},
+		// Form controls cap at xl — see `form-size.ts`.
+		[Size.XXL]: {
+			panel: 'w-80',
+			padding: 'p-4',
+			cell: 'size-10',
+			navBtn: 'size-9',
+			navIcon: 'size-5',
+			monthText: 'text-lg',
+			dayHeaderText: 'text-xs',
+			cellText: 'text-sm'
+		}
+	};
+	const density = $derived(calendarSize[size]);
+
 	const anchor = $derived(initialMonth ?? value ?? valueStart ?? new Date());
 
 	let viewYear = $state(anchor.getFullYear());
@@ -146,7 +228,11 @@
 
 <div
 	class={cn(
-		'border-default-200 inline-block w-64 rounded-lg border bg-white p-3 shadow-xs select-none',
+		'inline-block bg-white select-none',
+		'border-default-200 rounded-lg border shadow-xs',
+		'max-sm:w-full max-sm:rounded-none max-sm:border-0 max-sm:shadow-none',
+		density.panel,
+		density.padding,
 		className
 	)}
 	data-testid={buildTestId('calendar', undefined, testId)}
@@ -156,11 +242,14 @@
 			<button
 				type="button"
 				onclick={prevMonth}
-				class="text-default-500 hover:bg-default-100 hover:text-default-800 flex size-7 cursor-pointer items-center justify-center rounded"
+				class={cn(
+					'text-default-500 hover:bg-default-100 hover:text-default-800 flex cursor-pointer items-center justify-center rounded',
+					density.navBtn
+				)}
 				aria-label="Previous month"
 				{disabled}
 			>
-				<svg class="size-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+				<svg class={density.navIcon} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
 					<path
 						fill-rule="evenodd"
 						d="M12.78 5.22a.75.75 0 0 1 0 1.06L9.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0z"
@@ -168,15 +257,18 @@
 					/>
 				</svg>
 			</button>
-			<span class="text-default-800 text-sm font-semibold">{monthLabel}</span>
+			<span class={cn('text-default-800 font-semibold', density.monthText)}>{monthLabel}</span>
 			<button
 				type="button"
 				onclick={nextMonth}
-				class="text-default-500 hover:bg-default-100 hover:text-default-800 flex size-7 cursor-pointer items-center justify-center rounded"
+				class={cn(
+					'text-default-500 hover:bg-default-100 hover:text-default-800 flex cursor-pointer items-center justify-center rounded',
+					density.navBtn
+				)}
 				aria-label="Next month"
 				{disabled}
 			>
-				<svg class="size-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+				<svg class={density.navIcon} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
 					<path
 						fill-rule="evenodd"
 						d="M7.22 14.78a.75.75 0 0 1 0-1.06L10.94 10 7.22 6.28a.75.75 0 0 1 1.06-1.06l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0z"
@@ -187,7 +279,12 @@
 		</div>
 	{/if}
 
-	<div class="text-default-400 mb-1 grid grid-cols-7 gap-0.5 text-center text-[10px] font-medium">
+	<div
+		class={cn(
+			'text-default-400 mb-1 grid grid-cols-7 gap-0.5 text-center font-medium',
+			density.dayHeaderText
+		)}
+	>
 		{#each dayHeaders() as d (d)}
 			<div>{d}</div>
 		{/each}
@@ -202,7 +299,9 @@
 				aria-pressed={cell.isSelected}
 				aria-label={cell.date.toLocaleDateString()}
 				class={cn(
-					'relative flex size-8 items-center justify-center rounded text-xs transition-colors',
+					'relative flex items-center justify-center rounded transition-colors',
+					density.cell,
+					density.cellText,
 					!cell.inMonth && 'text-default-300',
 					cell.inMonth && !cell.disabled && 'text-default-700 hover:bg-default-100 cursor-pointer',
 					cell.disabled && 'text-default-200 cursor-not-allowed',

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

@@ -1,4 +1,5 @@
 import type { ClassValue } from 'tailwind-variants';
+import type { VariantSizes } from '../../index.js';
 /**
  * Calendar selection mode.
  * - `'single'`: one date. Bind to `value`.
@@ -31,6 +32,13 @@ export type CalendarProps = {
     hideHeader?: boolean;
     /** Disable all interaction. */
     disabled?: boolean;
+    /**
+     * Density preset. Scales day cells, headers, and overall panel width
+     * to match the tight form-size ladder so a `size="sm"` Calendar fits
+     * inside a `size="sm"` DatePicker / DateRange popover without feeling
+     * oversized. `2xl` aliases `xl`. @default 'md'
+     */
+    size?: VariantSizes;
     /** Wrapper class. */
     class?: ClassValue;
     /**

package/dist/forms/date-picker/DatePicker.svelte

@@ -2,6 +2,7 @@
 	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 Calendar from '../calendar/Calendar.svelte';
 	import type { DatePickerProps } from './date-picker-types.js';
@@ -38,16 +39,7 @@
 	const display = $derived(value ? formatDate(value) : '');
 	const hasErrors = $derived(errors.length > 0);
 
-	const sizeClass = $derived(
-		{
-			[Size.XS]: 'h-7 text-xs',
-			[Size.SM]: 'h-8 text-sm',
-			[Size.MD]: 'h-10 text-sm',
-			[Size.LG]: 'h-12 text-base',
-			[Size.XL]: 'h-14 text-lg',
-			[Size.XXL]: 'h-16 text-lg'
-		}[size]
-	);
+	const tokens = $derived(formSizeTokens[size]);
 
 	function clear(e: MouseEvent) {
 		e.stopPropagation();
@@ -83,9 +75,14 @@
 			aria-expanded={open}
 			aria-invalid={hasErrors}
 			class={cn(
-				'flex w-full items-center justify-between gap-2 rounded-lg border bg-white px-3 transition-colors',
+				'flex w-full items-center justify-between border bg-white transition-colors',
 				'focus-within:ring-2 focus-within:ring-offset-2 focus-within:outline-none',
-				sizeClass,
+				tokens.height,
+				tokens.padX,
+				tokens.text,
+				tokens.gap,
+				tokens.radius,
+				tokens.shadow,
 				hasErrors
 					? 'border-danger-300 focus-within:border-danger-500 focus-within:ring-danger-500'
 					: 'border-default-300 focus-within:border-primary-500 focus-within:ring-primary-500',
@@ -115,7 +112,7 @@
 				</button>
 			{:else}
 				<svg
-					class="text-default-400 size-4"
+					class={cn('text-default-400', tokens.iconSize)}
 					viewBox="0 0 20 20"
 					fill="currentColor"
 					aria-hidden="true"
@@ -130,7 +127,7 @@
 		</button>
 
 		{#snippet content()}
-			<Calendar {value} {minDate} {maxDate} onselect={(d) => handleSelect(d as Date)} />
+			<Calendar {value} {minDate} {maxDate} {size} onselect={(d) => handleSelect(d as Date)} />
 		{/snippet}
 	</Popover>
 

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

@@ -0,0 +1,37 @@
+import type { VariantSizes } from '../index.js';
+/**
+ * Canonical size tokens used by every form control — `Input`, `Textarea`,
+ * `NumberInput`, `Tags`, `Checkbox`, and the select-based controls.
+ *
+ * The goal is that a form using `size="sm"` across mixed controls looks
+ * vertically aligned and typographically coordinated. Before this map,
+ * each component had its own inline size map that disagreed with the
+ * others (e.g. `Input` only supported SM/MD/LG while `Textarea` supported
+ * all six, and `MD` meant `text-base` in `Input` but `text-sm` in
+ * `Textarea`).
+ *
+ * Multi-line controls (Textarea) read only `padX` / `padY` / `text` —
+ * height is content-driven. Single-line controls also read `height`.
+ */
+export type FormSizeTokens = {
+    /** Control height for single-line inputs (e.g. `h-10`). */
+    height: string;
+    /** Horizontal padding token (e.g. `px-3`). */
+    padX: string;
+    /** Vertical padding, used by multi-line controls and chip rows. */
+    padY: string;
+    /** Font size token (e.g. `text-base`). */
+    text: string;
+    /** Inline gap between leading icon and text (e.g. `gap-2`). */
+    gap: string;
+    /** Inline icon dimension (e.g. `size-4`). */
+    iconSize: string;
+    /** Rounded corner radius that scales with the control (e.g. `rounded-lg`). */
+    radius: string;
+    /**
+     * Drop shadow. `shadow-none` at the smallest sizes so `xs` / inline
+     * table cells don't stand out against their container.
+     */
+    shadow: string;
+};
+export declare const formSizeTokens: Record<VariantSizes, FormSizeTokens>;

package/dist/forms/form-size.js

@@ -0,0 +1,67 @@
+import { Size } from '../variants.js';
+// Tight ladder by design — we prefer compact, focused form controls
+// over bulky ones. `md` (the default) sits at `h-7` / `text-xs` so a
+// stock form reads dense; consumers who want roomier controls opt up to
+// `lg` / `xl`. `xs` is unmistakably inline-text-in-a-table-cell — 20px
+// tall, no shadow, barely-there rounded corners.
+//
+// `2xl` (`Size.XXL`) intentionally aliases `xl` for form controls: form
+// fields don't need a sixth, jumbo tier — anything larger reads as a
+// display element rather than an input. We still accept the token (the
+// `Size` enum exposes it library-wide) and quietly fall back to `xl`
+// rather than requiring every component to exclude it from its size type.
+const xl = {
+    height: 'h-11',
+    padX: 'px-3.5',
+    padY: 'py-2.5',
+    text: 'text-base',
+    gap: 'gap-2.5',
+    iconSize: 'size-5',
+    radius: 'rounded-lg',
+    shadow: 'shadow-xs'
+};
+export const formSizeTokens = {
+    [Size.XS]: {
+        height: 'h-5',
+        padX: 'px-1',
+        padY: 'py-0',
+        text: 'text-xs',
+        gap: 'gap-1',
+        iconSize: 'size-3',
+        radius: 'rounded-sm',
+        shadow: 'shadow-none'
+    },
+    [Size.SM]: {
+        height: 'h-6',
+        padX: 'px-1.5',
+        padY: 'py-0.5',
+        text: 'text-xs',
+        gap: 'gap-1',
+        iconSize: 'size-3',
+        radius: 'rounded',
+        shadow: 'shadow-xs'
+    },
+    [Size.MD]: {
+        height: 'h-7',
+        padX: 'px-2',
+        padY: 'py-1',
+        text: 'text-xs',
+        gap: 'gap-1.5',
+        iconSize: 'size-3.5',
+        radius: 'rounded-md',
+        shadow: 'shadow-xs'
+    },
+    [Size.LG]: {
+        height: 'h-9',
+        padX: 'px-2.5',
+        padY: 'py-1.5',
+        text: 'text-sm',
+        gap: 'gap-2',
+        iconSize: 'size-4',
+        radius: 'rounded-md',
+        shadow: 'shadow-xs'
+    },
+    [Size.XL]: xl,
+    // Form controls cap at xl visually — see comment above.
+    [Size.XXL]: xl
+};

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

@@ -236,6 +236,24 @@ export type NumberInputProps = {
     placeholder?: string;
     size?: VariantSizes;
     class?: ClassValue;
+    /**
+     * Leading icon rendered inside the field. Pass a Svelte component
+     * (e.g. an icon from your icon library) to fully customise, or use
+     * `iconPreset` for built-in options. When both are set, `icon` wins.
+     */
+    icon?: Component;
+    /**
+     * Built-in leading icon preset. Saves importing a separate icon
+     * component for common use cases.
+     * - `'currency'` — banknotes
+     * - `'quantity'` — hash / #
+     * - `'percentage'` — %
+     * - `'weight'` — scale
+     * - `'temperature'` — thermometer
+     *
+     * Omit (or pass `undefined`) for no icon. Overridden by `icon` prop.
+     */
+    iconPreset?: 'currency' | 'quantity' | 'percentage' | 'weight' | 'temperature';
     /**
      * Currently selected unit. When `units` is provided, this doubles as
      * the controlled value of the unit dropdown.
@@ -252,6 +270,16 @@ export type NumberInputProps = {
     dropdownIcon?: Component;
     /** Fires when the user picks a different unit. */
     onunitchange?: (prevUnit: string, newUnit: string) => void;
+    /**
+     * Format large numbers with thousands separators for readability
+     * (e.g. `1,232,312`). Formatting is applied on blur; while focused,
+     * the raw number is shown so typing stays predictable. @default true
+     */
+    formatThousands?: boolean;
+    /**
+     * BCP 47 locale used for thousands-separator formatting. @default 'en-US'
+     */
+    locale?: string;
     testId?: string;
 };
 /**
@@ -291,6 +319,11 @@ export interface DateRangeProps {
      */
     format?: string;
     errors?: string[];
+    /**
+     * Trigger control size — shares the form-size ladder with `Input`,
+     * `Select`, etc. so a row of mixed controls lines up. @default 'md'
+     */
+    size?: VariantSizes;
     /**
      * Fires when the user completes a selection. Both dates may be
      * undefined (cleared).