@salmexio/ui 1.2.0 → 1.3.0

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

@@ -0,0 +1,57 @@
+export interface Country {
+    code: string;
+    name: string;
+    dial: string;
+    flag: string;
+}
+export declare const DEFAULT_COUNTRIES: Country[];
+type PhoneSize = 'sm' | 'md' | 'lg';
+interface Props {
+    /** Visible label. */
+    label: string;
+    /** Phone number value (E.164 format: +1234567890). */
+    value?: string;
+    /** Default country code. */
+    defaultCountry?: string;
+    /** Available countries list. */
+    countries?: Country[];
+    /** Placeholder for the number field. */
+    placeholder?: string;
+    /** Size variant. */
+    size?: PhoneSize;
+    /** Required field. */
+    required?: boolean;
+    /** Disabled state. */
+    disabled?: boolean;
+    /** Error message. */
+    error?: string;
+    /** Hint text. */
+    hint?: string;
+    /** Hide the visible label. */
+    hideLabel?: boolean;
+    /** Reserve footer space even when empty. */
+    alwaysShowFooter?: boolean;
+    /** Additional CSS class. */
+    class?: string;
+    /** Called when value changes. */
+    onchange?: (value: string) => void;
+    /** Custom validation function. */
+    validate?: (value: string) => string | undefined;
+    /** Test ID. */
+    testId?: string;
+}
+/**
+ * PhoneInput
+ *
+ * INFRARED — International phone number input with country code selector,
+ * auto-formatting, and E.164 output. Zero external dependencies.
+ * Country list is curated for common use; extend via the countries prop.
+ *
+ * @example
+ * <PhoneInput label="Phone number" bind:value={phone} />
+ * <PhoneInput label="Mobile" defaultCountry="GB" />
+ */
+declare const PhoneInput: import("svelte").Component<Props, {}, "value">;
+type PhoneInput = ReturnType<typeof PhoneInput>;
+export default PhoneInput;
+//# sourceMappingURL=PhoneInput.svelte.d.ts.map

package/dist/forms/PhoneInput/PhoneInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/PhoneInput/PhoneInput.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,OAAO;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,iBAAiB,EAAE,OAAO,EA0BtC,CAAC;AAQF,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpC,UAAU,KAAK;IACd,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;IACtB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACjD,eAAe;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAqSD;;;;;;;;;;GAUG;AACH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/forms/PhoneInput/index.d.ts

@@ -0,0 +1,4 @@
+export { default as PhoneInput } from './PhoneInput.svelte';
+export type { Country } from './PhoneInput.svelte';
+export { DEFAULT_COUNTRIES } from './PhoneInput.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/forms/PhoneInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/PhoneInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/forms/PhoneInput/index.js

@@ -0,0 +1,2 @@
+export { default as PhoneInput } from './PhoneInput.svelte';
+export { DEFAULT_COUNTRIES } from './PhoneInput.svelte';

package/dist/forms/RadioGroup/RadioGroup.svelte

@@ -0,0 +1,417 @@
+<!--
+  @component RadioGroup
+
+  INFRARED — Accessible radio button group with fieldset/legend pattern.
+  Custom visuals using native <input type="radio"> for best a11y.
+  Supports descriptions, horizontal/vertical layout, sizes, and error states.
+
+  @example
+  <RadioGroup
+    label="Model"
+    options={[
+      { value: 'opus', label: 'Claude Opus', description: 'Most capable' },
+      { value: 'sonnet', label: 'Claude Sonnet', description: 'Balanced' },
+      { value: 'haiku', label: 'Claude Haiku', description: 'Fastest' },
+    ]}
+    bind:value={selectedModel}
+  />
+-->
+<script lang="ts" module>
+export interface RadioOption {
+	value: string;
+	label: string;
+	description?: string;
+	disabled?: boolean;
+}
+</script>
+
+<script lang="ts">
+import { cn } from '../../utils/cn.js';
+import { generateId } from '../../utils/keyboard.js';
+
+type RadioSize = 'sm' | 'md' | 'lg';
+type RadioOrientation = 'vertical' | 'horizontal';
+
+interface Props {
+	/** Group label (rendered as legend). */
+	label: string;
+	/** Radio options. */
+	options: RadioOption[];
+	/** Currently selected value. */
+	value?: string;
+	/** HTML name attribute for the radio group. */
+	name?: string;
+	/** Required field. */
+	required?: boolean;
+	/** Disable all options. */
+	disabled?: boolean;
+	/** Error message. */
+	error?: string;
+	/** Hint text. */
+	hint?: string;
+	/** Size variant. */
+	size?: RadioSize;
+	/** Layout direction. */
+	orientation?: RadioOrientation;
+	/** Hide the legend visually. */
+	hideLabel?: boolean;
+	/** Reserve footer space even when empty. */
+	alwaysShowFooter?: boolean;
+	/** Additional CSS class. */
+	class?: string;
+	/** Change handler. */
+	onchange?: (value: string) => void;
+	/** Test ID. */
+	testId?: string;
+}
+
+let {
+	label,
+	options,
+	value = $bindable(''),
+	name = generateId('radio'),
+	required = false,
+	disabled = false,
+	error = '',
+	hint = '',
+	size = 'md',
+	orientation = 'vertical',
+	hideLabel = false,
+	alwaysShowFooter = true,
+	class: className = '',
+	onchange,
+	testId
+}: Props = $props();
+
+let hasInteracted = $state(false);
+
+const showError = $derived(hasInteracted && !!error);
+const errorId = $derived(`${name}-error`);
+const hintId = $derived(`${name}-hint`);
+
+const hasFooterContent = $derived(showError || !!hint);
+
+function handleChange(optValue: string) {
+	value = optValue;
+	hasInteracted = true;
+	onchange?.(optValue);
+}
+</script>
+
+<fieldset
+	class={cn(
+		'sx-radio-group',
+		`sx-radio-${size}`,
+		disabled && 'sx-radio-disabled',
+		className
+	)}
+	{disabled}
+	aria-describedby={[showError && errorId, hint && hintId].filter(Boolean).join(' ') || undefined}
+	data-testid={testId}
+>
+	<legend class={cn('sx-radio-legend', hideLabel && 'sx-sr-only')}>
+		{label}
+		{#if required}
+			<span class="sx-radio-required" aria-hidden="true">*</span>
+		{/if}
+	</legend>
+
+	<div class={cn('sx-radio-options', `sx-radio-${orientation}`)}>
+		{#each options as opt}
+			{@const optId = `${name}-${opt.value}`}
+			{@const isSelected = value === opt.value}
+			{@const isDisabled = disabled || !!opt.disabled}
+			{@const descId = opt.description ? `${optId}-desc` : undefined}
+			<label
+				for={optId}
+				class={cn(
+					'sx-radio-option',
+					isSelected && 'sx-radio-option-selected',
+					isDisabled && 'sx-radio-option-disabled'
+				)}
+			>
+				<input
+					id={optId}
+					type="radio"
+					{name}
+					value={opt.value}
+					checked={isSelected}
+					disabled={isDisabled}
+					class="sx-radio-input"
+					aria-describedby={descId}
+					onchange={() => handleChange(opt.value)}
+				/>
+				<span
+					class={cn(
+						'sx-radio-circle',
+						isSelected && 'sx-radio-circle-checked',
+						showError && 'sx-radio-circle-error'
+					)}
+					aria-hidden="true"
+				>
+					{#if isSelected}
+						<span class="sx-radio-dot"></span>
+					{/if}
+				</span>
+				<span class="sx-radio-content">
+					<span class="sx-radio-text">{opt.label}</span>
+					{#if opt.description}
+						<span id={descId} class="sx-radio-description">{opt.description}</span>
+					{/if}
+				</span>
+			</label>
+		{/each}
+	</div>
+
+	{#if alwaysShowFooter || hasFooterContent}
+		<div class="sx-radio-footer">
+			{#if showError}
+				<p id={errorId} class="sx-radio-error" role="alert" aria-live="assertive">{error}</p>
+			{:else if hint}
+				<p id={hintId} class="sx-radio-hint">{hint}</p>
+			{/if}
+		</div>
+	{/if}
+</fieldset>
+
+<style>
+	.sx-radio-group {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sx-space-2);
+		border: none;
+		padding: 0;
+		margin: 0;
+	}
+
+	.sx-radio-disabled {
+		opacity: 0.5;
+	}
+
+	.sx-radio-legend {
+		font-family: var(--sx-font-body);
+		font-weight: 500;
+		font-size: var(--sx-text-sm);
+		color: var(--sx-color-text-secondary);
+		padding: 0;
+		margin-bottom: var(--sx-space-1);
+	}
+
+	.sx-radio-required {
+		color: var(--sx-color-red);
+		margin-left: 2px;
+	}
+
+	.sx-sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	.sx-radio-options {
+		display: flex;
+		gap: var(--sx-space-2);
+	}
+
+	.sx-radio-vertical {
+		flex-direction: column;
+	}
+
+	.sx-radio-horizontal {
+		flex-direction: row;
+		flex-wrap: wrap;
+	}
+
+	/* Option row */
+	.sx-radio-option {
+		display: flex;
+		align-items: flex-start;
+		gap: var(--sx-space-2);
+		cursor: pointer;
+		user-select: none;
+		font-family: var(--sx-font-body);
+		padding: var(--sx-space-1) 0;
+	}
+
+	.sx-radio-option-disabled {
+		cursor: not-allowed;
+	}
+
+	/* Hidden native input */
+	.sx-radio-input {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	/* Custom radio circle */
+	.sx-radio-circle {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+		background: var(--sx-color-surface);
+		border: 1px solid var(--sx-color-border-strong);
+		box-shadow:
+			inset 0 1px 3px rgba(0, 0, 0, 0.3),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.06);
+		transition:
+			background var(--sx-transition-fast),
+			border-color var(--sx-transition-fast),
+			box-shadow var(--sx-transition-fast);
+	}
+
+	.sx-radio-sm .sx-radio-circle {
+		width: 16px;
+		height: 16px;
+	}
+
+	.sx-radio-md .sx-radio-circle {
+		width: 20px;
+		height: 20px;
+	}
+
+	.sx-radio-lg .sx-radio-circle {
+		width: 24px;
+		height: 24px;
+	}
+
+	/* Hover */
+	.sx-radio-option:hover .sx-radio-circle:not(.sx-radio-circle-checked) {
+		border-color: var(--sx-color-border-hover);
+	}
+
+	/* Focus */
+	.sx-radio-input:focus-visible + .sx-radio-circle {
+		outline: 2px solid var(--sx-color-primary);
+		outline-offset: 2px;
+		box-shadow:
+			inset 0 1px 3px rgba(0, 0, 0, 0.3),
+			0 0 12px -4px var(--sx-color-primary-ring);
+	}
+
+	/* Checked */
+	.sx-radio-circle-checked {
+		background: var(--sx-gradient-brand);
+		border-color: var(--sx-color-primary-ring);
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.15),
+			0 0 6px -2px var(--sx-color-primary-ring);
+	}
+
+	.sx-radio-input:focus-visible + .sx-radio-circle-checked {
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.15),
+			0 0 10px -2px var(--sx-color-primary-ring);
+	}
+
+	/* Error */
+	.sx-radio-circle-error:not(.sx-radio-circle-checked) {
+		border-color: var(--sx-color-red);
+		box-shadow:
+			inset 0 1px 3px rgba(0, 0, 0, 0.3),
+			0 0 8px -4px rgba(220, 38, 38, 0.2);
+	}
+
+	/* Inner dot */
+	.sx-radio-dot {
+		width: 40%;
+		height: 40%;
+		border-radius: 50%;
+		background: #fff;
+		animation: sx-check-in var(--sx-duration-fast) var(--sx-ease-out) both;
+	}
+
+	/* Text */
+	.sx-radio-content {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		padding-top: 1px;
+	}
+
+	.sx-radio-text {
+		font-size: var(--sx-text-sm);
+		font-weight: 500;
+		color: var(--sx-color-text);
+	}
+
+	.sx-radio-description {
+		font-size: var(--sx-text-xs);
+		color: var(--sx-color-text-secondary);
+	}
+
+	/* Footer */
+	.sx-radio-footer {
+		min-height: 1.25rem;
+	}
+
+	.sx-radio-error {
+		font-size: var(--sx-text-xs);
+		font-weight: 500;
+		color: var(--sx-color-red);
+		margin: 0;
+	}
+
+	.sx-radio-hint {
+		font-size: var(--sx-text-xs);
+		color: var(--sx-color-text-secondary);
+		margin: 0;
+	}
+
+	/* Size adjustments */
+	.sx-radio-sm .sx-radio-text {
+		font-size: var(--sx-text-xs);
+	}
+
+	.sx-radio-sm .sx-radio-legend {
+		font-size: var(--sx-text-xs);
+	}
+
+	.sx-radio-lg .sx-radio-text {
+		font-size: var(--sx-text-base);
+	}
+
+	.sx-radio-lg .sx-radio-legend {
+		font-size: var(--sx-text-base);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sx-radio-circle {
+			transition: none;
+		}
+
+		.sx-radio-dot {
+			animation: none;
+		}
+	}
+
+	@media (forced-colors: active) {
+		.sx-radio-input:focus-visible + .sx-radio-circle {
+			outline: 2px solid CanvasText;
+			outline-offset: 2px;
+		}
+
+		.sx-radio-circle-checked {
+			background: Highlight;
+			border-color: Highlight;
+		}
+
+		.sx-radio-dot {
+			background: HighlightText;
+		}
+	}
+</style>

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

@@ -0,0 +1,62 @@
+export interface RadioOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+type RadioSize = 'sm' | 'md' | 'lg';
+type RadioOrientation = 'vertical' | 'horizontal';
+interface Props {
+    /** Group label (rendered as legend). */
+    label: string;
+    /** Radio options. */
+    options: RadioOption[];
+    /** Currently selected value. */
+    value?: string;
+    /** HTML name attribute for the radio group. */
+    name?: string;
+    /** Required field. */
+    required?: boolean;
+    /** Disable all options. */
+    disabled?: boolean;
+    /** Error message. */
+    error?: string;
+    /** Hint text. */
+    hint?: string;
+    /** Size variant. */
+    size?: RadioSize;
+    /** Layout direction. */
+    orientation?: RadioOrientation;
+    /** Hide the legend visually. */
+    hideLabel?: boolean;
+    /** Reserve footer space even when empty. */
+    alwaysShowFooter?: boolean;
+    /** Additional CSS class. */
+    class?: string;
+    /** Change handler. */
+    onchange?: (value: string) => void;
+    /** Test ID. */
+    testId?: string;
+}
+/**
+ * RadioGroup
+ *
+ * INFRARED — Accessible radio button group with fieldset/legend pattern.
+ * Custom visuals using native <input type="radio"> for best a11y.
+ * Supports descriptions, horizontal/vertical layout, sizes, and error states.
+ *
+ * @example
+ * <RadioGroup
+ *   label="Model"
+ *   options={[
+ *     { value: 'opus', label: 'Claude Opus', description: 'Most capable' },
+ *     { value: 'sonnet', label: 'Claude Sonnet', description: 'Balanced' },
+ *     { value: 'haiku', label: 'Claude Haiku', description: 'Fastest' },
+ *   ]}
+ *   bind:value={selectedModel}
+ * />
+ */
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;
+//# sourceMappingURL=RadioGroup.svelte.d.ts.map

package/dist/forms/RadioGroup/RadioGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/RadioGroup/RadioGroup.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAOD,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpC,KAAK,gBAAgB,GAAG,UAAU,GAAG,YAAY,CAAC;AAElD,UAAU,KAAK;IACd,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wBAAwB;IACxB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,eAAe;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAuGD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/forms/RadioGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { default as RadioGroup } from './RadioGroup.svelte';
+export type { RadioOption } from './RadioGroup.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/forms/RadioGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/RadioGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/forms/RadioGroup/index.js

@@ -0,0 +1 @@
+export { default as RadioGroup } from './RadioGroup.svelte';