@lavalogic/scoria 0.40.5 → 0.40.7

package/dist/Components/Icons.d.ts

@@ -355,6 +355,10 @@ export declare const icons: {
         readonly box: 24;
         readonly svg: "<path fill-rule=\"evenodd\" d=\"M15.6 3.7a1 1 0 0 0-1.5 0l-9.7 9.7a2 2 0 0 0 0 2.9L8 19.8V21h13v-1H10.2L20.3 9.9c.4-.4.4-1 0-1.4l-4.7-4.8ZM5.8 14.8l2.2-2 3.3 3.2-2.1 2.2-3.4-3.4Zm3.6-3.5 3.3 3.3 5.5-5.4-3.4-3.4-5.4 5.5Z\" clip-rule=\"evenodd\"/>";
     };
+    readonly email: {
+        readonly box: 24;
+        readonly svg: "<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M20 5C21.1046 5 22 5.89543 22 7V17C22 18.1046 21.1046 19 20 19H4C2.89543 19 2 18.1046 2 17L2 7C2 5.89543 2.89543 5 4 5H20ZM13.043 13.8623C12.4027 14.2536 11.5973 14.2536 10.957 13.8623L9.47949 12.96L4.47656 16.8506C4.62898 16.9446 4.80779 17 5 17H19C19.1919 17 19.3702 16.9443 19.5225 16.8506L14.5195 12.96L13.043 13.8623ZM4 15.2217L8.03906 12.0791L4 8.61035V15.2217ZM15.96 12.0791L20 15.2217V8.61035L15.96 12.0791ZM5 7C4.89813 7 4.79963 7.01466 4.70703 7.04297L11.4785 12.1816C11.7986 12.3772 12.2014 12.3772 12.5215 12.1816L19.292 7.04297C19.1996 7.01483 19.1015 7 19 7H5Z\" />";
+    };
     readonly error: {
         readonly box: 12;
         readonly svg: "<path d=\"M6,1.2A4.8,4.8,0,1,1,1.2,6,4.8,4.8,0,0,1,6,1.2Zm0-1A5.76,5.76,0,1,0,11.76,6,5.76,5.76,0,0,0,6,.24ZM5.52,3.06h1V6.9h-1ZM6,9a.6.6,0,1,1,.6-.6A.6.6,0,0,1,6,9Z\"/>";

package/dist/Components/Icons.js

@@ -468,6 +468,10 @@ export const icons = {
         box: 24,
         svg: `<path fill-rule="evenodd" d="M15.6 3.7a1 1 0 0 0-1.5 0l-9.7 9.7a2 2 0 0 0 0 2.9L8 19.8V21h13v-1H10.2L20.3 9.9c.4-.4.4-1 0-1.4l-4.7-4.8ZM5.8 14.8l2.2-2 3.3 3.2-2.1 2.2-3.4-3.4Zm3.6-3.5 3.3 3.3 5.5-5.4-3.4-3.4-5.4 5.5Z" clip-rule="evenodd"/>`,
     },
+    email: {
+        box: 24,
+        svg: `<path fill-rule="evenodd" clip-rule="evenodd" d="M20 5C21.1046 5 22 5.89543 22 7V17C22 18.1046 21.1046 19 20 19H4C2.89543 19 2 18.1046 2 17L2 7C2 5.89543 2.89543 5 4 5H20ZM13.043 13.8623C12.4027 14.2536 11.5973 14.2536 10.957 13.8623L9.47949 12.96L4.47656 16.8506C4.62898 16.9446 4.80779 17 5 17H19C19.1919 17 19.3702 16.9443 19.5225 16.8506L14.5195 12.96L13.043 13.8623ZM4 15.2217L8.03906 12.0791L4 8.61035V15.2217ZM15.96 12.0791L20 15.2217V8.61035L15.96 12.0791ZM5 7C4.89813 7 4.79963 7.01466 4.70703 7.04297L11.4785 12.1816C11.7986 12.3772 12.2014 12.3772 12.5215 12.1816L19.292 7.04297C19.1996 7.01483 19.1015 7 19 7H5Z" />`,
+    },
     error: {
         box,
         svg: `<path d="M6,1.2A4.8,4.8,0,1,1,1.2,6,4.8,4.8,0,0,1,6,1.2Zm0-1A5.76,5.76,0,1,0,11.76,6,5.76,5.76,0,0,0,6,.24ZM5.52,3.06h1V6.9h-1ZM6,9a.6.6,0,1,1,.6-.6A.6.6,0,0,1,6,9Z"/>`,

package/dist/Components/OptionCards.svelte

@@ -0,0 +1,107 @@
+<svelte:options runes />
+
+<!--
+@component
+A single-select group of large, clickable cards — each an optional leading
+icon, a label, and optional helper text. Use it instead of a `SingleSelect`
+when the choices benefit from a sentence of explanation (e.g. picking a
+report's delivery method or output format).
+
+Controlled: pass `selected` and update it in `onchange`. Accessible as a
+native radio group (the radio inputs are visually hidden but focusable).
+-->
+<script
+	lang="ts"
+	generics="T"
+>
+	import { Colour } from '../scss/colours.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import type { OptionCardsProps } from './OptionCardsProps.js';
+	import Icon from './Icon.svelte';
+
+	let { name, options, selected, onchange }: OptionCardsProps<T> = $props();
+</script>
+
+<div
+	class="option-cards"
+	role="radiogroup"
+>
+	{#each options as option (option.value)}
+		{@const isSelected = selected === option.value}
+		<label
+			class="card"
+			class:selected={isSelected}
+		>
+			<input
+				class="native"
+				type="radio"
+				{name}
+				checked={isSelected}
+				onchange={() => void onchange?.(option.value)}
+			/>
+			{#if option.icon}
+				<Icon
+					name={option.icon}
+					size={Size.Large}
+					colour={isSelected ? Colour['$brand-primary'] : Colour['$ui-blue-14']}
+				/>
+			{/if}
+			<span class="title">{option.label}</span>
+			{#if option.info}
+				<span class="info">{option.info}</span>
+			{/if}
+		</label>
+	{/each}
+</div>
+
+<style>.option-cards {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 0.75rem;
+}
+
+.card {
+  flex: 1 1 0;
+  min-width: 9rem;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.25rem;
+  padding: 0.85rem 1rem;
+  border: solid 1px #cbd4da;
+  border-radius: 4px;
+  background-color: #ffffff;
+  color: #647d8e;
+  cursor: pointer;
+}
+
+/* Visually hidden but keyboard-focusable (drives :focus-within). */
+.native {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.title {
+  color: #3a4952;
+  font-weight: 600;
+}
+
+.info {
+  font-size: 0.8rem;
+}
+
+.card.selected {
+  border-color: #259fc7;
+  background-color: #f4fbfd;
+  color: #259fc7;
+}
+.card.selected .title {
+  color: #259fc7;
+}
+
+.card:focus-within {
+  outline: solid 2px #259fc7;
+  outline-offset: 2px;
+}</style>

package/dist/Components/OptionCards.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { OptionCardsProps } from './OptionCardsProps.js';
+declare function $$render<T>(): {
+    props: OptionCardsProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A single-select group of large, clickable cards — each an optional leading
+ * icon, a label, and optional helper text. Use it instead of a `SingleSelect`
+ * when the choices benefit from a sentence of explanation (e.g. picking a
+ * report's delivery method or output format).
+ *
+ * Controlled: pass `selected` and update it in `onchange`. Accessible as a
+ * native radio group (the radio inputs are visually hidden but focusable).
+ */
+declare const OptionCards: $$IsomorphicComponent;
+type OptionCards<T> = InstanceType<typeof OptionCards<T>>;
+export default OptionCards;

package/dist/Components/OptionCardsProps.d.ts

@@ -0,0 +1,19 @@
+import type { OptionCard } from '../Types/Internal/OptionCard.js';
+/**
+ * Props for {@link OptionCards} — a single-select group of large, clickable
+ * cards (icon + label + helper), used when a choice benefits from more
+ * explanation than a plain `SingleSelect` (e.g. a delivery/format chooser).
+ *
+ * Controlled component: pass `selected` and update it from `onchange`.
+ * `T` is compared with `===`; use a primitive or a stable reference.
+ */
+export interface OptionCardsProps<T> {
+    /** `name` attribute shared by the underlying radio inputs. */
+    name?: string;
+    /** The option set rendered as cards. */
+    options: ReadonlyArray<OptionCard<T>>;
+    /** Currently-selected value. */
+    selected?: T;
+    /** Called when a card is chosen. May be `void` or `Promise<void>`. */
+    onchange?: (value: T) => void | Promise<void>;
+}

package/dist/Components/OptionCardsProps.js

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

package/dist/Types/Internal/OptionCard.d.ts

@@ -0,0 +1,17 @@
+import type { icons } from '../../Components/Icons.js';
+/**
+ * A single option in an {@link OptionCards} picker — a selectable card with
+ * an optional leading icon, a label, and optional helper text. The generic
+ * carries the concrete value type so the surrounding component stays
+ * type-safe in its `onchange` callback.
+ */
+export interface OptionCard<T> {
+    /** The option's value when selected (compared with `===`). */
+    value: T;
+    /** Visible card title. */
+    label: string;
+    /** Optional helper text under the title. */
+    info?: string;
+    /** Optional leading icon, looked up in the frozen icon registry. */
+    icon?: keyof typeof icons;
+}

package/dist/Types/Internal/OptionCard.js

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

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export { default as Pagination } from './Components/Base/Pagination.svelte';
 export { type PaginationProps } from './Components/Base/PaginationProps.js';
 export { default as BigRadioSet } from './Components/BigRadioSet.svelte';
 export type { BigRadioSetProps } from './Components/BigRadioSetProps.js';
+export { default as OptionCards } from './Components/OptionCards.svelte';
+export type { OptionCardsProps } from './Components/OptionCardsProps.js';
 export { default as Bubble } from './Components/Bubble.svelte';
 export { type BubbleColour } from './Components/BubbleColour.js';
 export { type BubbleProps } from './Components/BubbleProps.js';
@@ -187,6 +189,7 @@ export { type UseTooltipHandlers, type UseTooltipOptions, useTooltip, } from './
 export { Colour, ColourSet } from './scss/colours.js';
 export { Sizing } from './scss/sizing.js';
 export { type BigRadioOption } from './Types/Internal/BigRadioOption.js';
+export { type OptionCard } from './Types/Internal/OptionCard.js';
 export { type ButtonProp } from './Types/Internal/ButtonProp.js';
 export { type CallbackButton } from './Types/Internal/CallbackButton.js';
 export { type DateChange } from './Types/Internal/DateChange.js';

package/dist/index.js

@@ -7,6 +7,7 @@ export {} from './Components/Base/ContextWrapperProps.js';
 export { default as Pagination } from './Components/Base/Pagination.svelte';
 export {} from './Components/Base/PaginationProps.js';
 export { default as BigRadioSet } from './Components/BigRadioSet.svelte';
+export { default as OptionCards } from './Components/OptionCards.svelte';
 export { default as Bubble } from './Components/Bubble.svelte';
 export {} from './Components/BubbleColour.js';
 export {} from './Components/BubbleProps.js';
@@ -146,6 +147,7 @@ export { useTooltip, } from './Helpers/useTooltip.svelte.js';
 export { Colour, ColourSet } from './scss/colours.js';
 export { Sizing } from './scss/sizing.js';
 export {} from './Types/Internal/BigRadioOption.js';
+export {} from './Types/Internal/OptionCard.js';
 export {} from './Types/Internal/ButtonProp.js';
 export {} from './Types/Internal/CallbackButton.js';
 export {} from './Types/Internal/DateChange.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.40.5",
+  "version": "0.40.7",
   "publishConfig": {
     "access": "restricted"
   },