@salmexio/ui 1.2.1 → 1.3.0

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

@@ -0,0 +1,48 @@
+type DatePickerSize = 'sm' | 'md' | 'lg';
+interface Props {
+    /** Visible label. */
+    label: string;
+    /** Selected date in YYYY-MM-DD format. */
+    value?: string;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Minimum allowed date (YYYY-MM-DD). */
+    min?: string;
+    /** Maximum allowed date (YYYY-MM-DD). */
+    max?: string;
+    /** Size variant. */
+    size?: DatePickerSize;
+    /** 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 date changes. */
+    onchange?: (value: string) => void;
+    /** Test ID. */
+    testId?: string;
+}
+/**
+ * DatePicker
+ *
+ * INFRARED — Date input with calendar popup, month/year navigation,
+ * today button, keyboard navigation, and full ARIA compliance.
+ * Zero dependencies.
+ *
+ * @example
+ * <DatePicker label="Launch date" bind:value={date} />
+ * <DatePicker label="Start" min="2024-01-01" max="2025-12-31" />
+ */
+declare const DatePicker: import("svelte").Component<Props, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;
+//# sourceMappingURL=DatePicker.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/DatePicker/DatePicker.svelte.ts"],"names":[],"mappings":"AAQA,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,UAAU,KAAK;IACd,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,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,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,eAAe;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAsYD;;;;;;;;;;GAUG;AACH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

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

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

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

package/dist/forms/DatePicker/index.js

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

package/dist/forms/FormField/FormField.svelte

@@ -0,0 +1,173 @@
+<!--
+  @component FormField
+
+  INFRARED — Generic form field wrapper providing consistent label, hint,
+  error, and required indicator treatment. Wrap any custom content that
+  needs the same visual treatment as TextInput/Select.
+
+  @example
+  <FormField label="Custom field" hint="Pick something" error={err}>
+    <MyCustomWidget />
+  </FormField>
+-->
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import { cn } from '../../utils/cn.js';
+import { generateId } from '../../utils/keyboard.js';
+
+type FieldSize = 'sm' | 'md' | 'lg';
+
+interface Props {
+	/** Visible label text (required for a11y). */
+	label: string;
+	/** Unique id; auto-generated if omitted. */
+	id?: string;
+	/** Hide the visible label (still accessible to screen readers). */
+	hideLabel?: boolean;
+	/** Mark as required. */
+	required?: boolean;
+	/** Error message. */
+	error?: string;
+	/** Hint text shown below the field. */
+	hint?: string;
+	/** Success message. */
+	successMessage?: string;
+	/** Size variant. */
+	size?: FieldSize;
+	/** Disabled state (visual only). */
+	disabled?: boolean;
+	/** Reserve footer space even when empty. */
+	alwaysShowFooter?: boolean;
+	/** Additional CSS class. */
+	class?: string;
+	/** Test ID. */
+	testId?: string;
+	/** Field content. */
+	children?: Snippet;
+}
+
+let {
+	label,
+	id = generateId('field'),
+	hideLabel = false,
+	required = false,
+	error = '',
+	hint = '',
+	successMessage = '',
+	size = 'md',
+	disabled = false,
+	alwaysShowFooter = true,
+	class: className = '',
+	testId,
+	children
+}: Props = $props();
+
+const errorId = $derived(`${id}-error`);
+const hintId = $derived(`${id}-hint`);
+const hasFooterContent = $derived(!!error || !!hint || !!successMessage);
+</script>
+
+<div
+	class={cn(
+		'sx-formfield',
+		`sx-formfield-${size}`,
+		disabled && 'sx-formfield-disabled',
+		className
+	)}
+	data-testid={testId}
+>
+	<label for={id} class={cn('sx-formfield-label', hideLabel && 'sx-sr-only')}>
+		{label}
+		{#if required}
+			<span class="sx-formfield-required" aria-hidden="true">*</span>
+		{/if}
+	</label>
+
+	{#if children}
+		{@render children()}
+	{/if}
+
+	{#if alwaysShowFooter || hasFooterContent}
+		<div class="sx-formfield-footer">
+			{#if error}
+				<p id={errorId} class="sx-formfield-message sx-formfield-error" role="alert" aria-live="assertive">
+					{error}
+				</p>
+			{:else if successMessage}
+				<p class="sx-formfield-message sx-formfield-success" role="status" aria-live="polite">
+					{successMessage}
+				</p>
+			{:else if hint}
+				<p id={hintId} class="sx-formfield-message sx-formfield-hint">
+					{hint}
+				</p>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.sx-formfield {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sx-space-1);
+	}
+
+	.sx-formfield-disabled {
+		opacity: 0.5;
+	}
+
+	.sx-formfield-label {
+		font-family: var(--sx-font-body);
+		font-weight: 500;
+		font-size: var(--sx-text-sm);
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-formfield-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-formfield-footer {
+		min-height: 1.25rem;
+	}
+
+	.sx-formfield-message {
+		font-size: var(--sx-text-xs);
+		margin: 0;
+	}
+
+	.sx-formfield-error {
+		color: var(--sx-color-red);
+		font-weight: 500;
+	}
+
+	.sx-formfield-success {
+		color: var(--sx-color-green);
+	}
+
+	.sx-formfield-hint {
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-formfield-sm .sx-formfield-label {
+		font-size: var(--sx-text-xs);
+	}
+
+	.sx-formfield-lg .sx-formfield-label {
+		font-size: var(--sx-text-base);
+	}
+</style>

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

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+type FieldSize = 'sm' | 'md' | 'lg';
+interface Props {
+    /** Visible label text (required for a11y). */
+    label: string;
+    /** Unique id; auto-generated if omitted. */
+    id?: string;
+    /** Hide the visible label (still accessible to screen readers). */
+    hideLabel?: boolean;
+    /** Mark as required. */
+    required?: boolean;
+    /** Error message. */
+    error?: string;
+    /** Hint text shown below the field. */
+    hint?: string;
+    /** Success message. */
+    successMessage?: string;
+    /** Size variant. */
+    size?: FieldSize;
+    /** Disabled state (visual only). */
+    disabled?: boolean;
+    /** Reserve footer space even when empty. */
+    alwaysShowFooter?: boolean;
+    /** Additional CSS class. */
+    class?: string;
+    /** Test ID. */
+    testId?: string;
+    /** Field content. */
+    children?: Snippet;
+}
+/**
+ * FormField
+ *
+ * INFRARED — Generic form field wrapper providing consistent label, hint,
+ * error, and required indicator treatment. Wrap any custom content that
+ * needs the same visual treatment as TextInput/Select.
+ *
+ * @example
+ * <FormField label="Custom field" hint="Pick something" error={err}>
+ *   <MyCustomWidget />
+ * </FormField>
+ */
+declare const FormField: import("svelte").Component<Props, {}, "">;
+type FormField = ReturnType<typeof FormField>;
+export default FormField;
+//# sourceMappingURL=FormField.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/FormField/FormField.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpC,UAAU,KAAK;IACd,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAsED;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/FormField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/forms/FormField/index.js

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