@lavalogic/scoria 0.0.1

package/dist/Components/BigRadioSet.svelte

@@ -0,0 +1,88 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import type { BigRadioOption } from '../Types/Internal/BigRadioOption.js';
+
+	export interface BigRadioSetProps<T> {
+		name?: string;
+		options: BigRadioOption<T>[];
+		selected?: T;
+	}
+</script>
+
+<script lang="ts" generics="T">
+	let { name, options, selected = $bindable() }: BigRadioSetProps<T> = $props();
+
+	// let selected: T | undefined = $state();
+</script>
+
+<div class="wrapper">
+	{#each options as option (option)}
+		{@render radio(option)}
+	{/each}
+</div>
+
+{#snippet radio(option: BigRadioOption<T>)}
+	<!-- {@debug selected} -->
+	<label class:selected={selected === option.value}>
+		<input type="radio" name="hello" bind:group={selected} value={option.value} />
+		<div class="text">
+			<h5 class="title">{option.label}</h5>
+			<p class="note">{option.info}</p>
+		</div>
+	</label>
+{/snippet}
+
+<style>.wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  padding: 1.5rem;
+  gap: 1rem;
+  background-color: #ffffff;
+  border-radius: 4px;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
+  justify-content: center;
+}
+
+label {
+  cursor: pointer;
+  width: 271px;
+  max-width: 400px;
+  flex-grow: 1;
+  display: flex;
+  flex-flow: row nowrap;
+  padding: 1rem;
+  background-color: #ffffff;
+  color: #3a4952;
+  border-radius: 4px;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
+  align-items: center;
+  gap: 1rem;
+}
+label input {
+  cursor: pointer;
+  height: 100%;
+  max-height: 4rem;
+  width: 4rem;
+  accent-color: #259fc7;
+}
+label input:checked {
+  accent-color: #94dff6;
+}
+label .text h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+}
+label .text p {
+  font-size: 0.8rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0;
+}
+label.selected {
+  background-color: #259fc7;
+  color: #ffffff;
+}
+label.selected h5 {
+  color: #ffffff;
+}</style>

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

@@ -0,0 +1,30 @@
+import type { BigRadioOption } from '../Types/Internal/BigRadioOption.js';
+export interface BigRadioSetProps<T> {
+    name?: string;
+    options: BigRadioOption<T>[];
+    selected?: T;
+}
+declare function $$render<T>(): {
+    props: BigRadioSetProps<T>;
+    exports: {};
+    bindings: "selected";
+    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(): "selected";
+    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']>;
+}
+declare const BigRadioSet: $$IsomorphicComponent;
+type BigRadioSet<T> = InstanceType<typeof BigRadioSet<T>>;
+export default BigRadioSet;

package/dist/Components/Bubble.svelte

@@ -0,0 +1,115 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import type { Colour } from '../scss/colours.js';
+	import type { SelectOption } from '../Types/Internal/SelectOption.js';
+	import { Size } from '../Types/Internal/Size.js';
+
+	export interface BubbleColour {
+		colour: Colour;
+		backgroundColour: Colour;
+	}
+
+	export interface BubbleProps {
+		value: string;
+
+		onclick?: () => void;
+		icon?: PartialIconProps;
+		bold?: boolean;
+		size?: Size;
+		label?: string;
+		options?: SelectOption<unknown>[];
+		colours?: BubbleColour | null | undefined;
+	}
+
+	const horizontalWithValue: Partial<Record<Size, string>> = {
+		[Size.Large]: '1rem'
+	};
+
+	const horizontalWithoutValue: Partial<Record<Size, string>> = {
+		[Size.Large]: '1.25rem'
+	};
+
+	const vertical: Partial<Record<Size, string>> = {
+		[Size.Large]: '0.5rem'
+	};
+
+	const fontSizes: Partial<Record<Size, string>> = {
+		[Size.Large]: '1.12rem'
+	};
+
+	const borderRadii: Partial<Record<Size, string>> = {
+		[Size.Large]: '1.75rem'
+	};
+</script>
+
+<script lang="ts">
+	import Icon, { type PartialIconProps } from './Icon.svelte';
+
+	const {
+		options,
+		value,
+		colours,
+		label,
+		size = Size.Medium,
+		bold,
+		icon,
+		onclick
+	}: BubbleProps = $props();
+
+	const verticalPadding = $derived(vertical[size] ?? '0.18rem');
+	const horizontalPadding = $derived.by(() => {
+		if (value.length === 1) {
+			return horizontalWithValue[size] ?? '0.5rem';
+		}
+
+		return horizontalWithoutValue[size] ?? '0.75rem';
+	});
+	const fontSize = $derived(fontSizes[size] ?? '1rem');
+	const borderRadius = $derived(borderRadii[size] ?? '12px');
+</script>
+
+{#if onclick}
+	<button class="contents" {onclick}>
+		{@render bubble()}
+	</button>
+{:else}
+	{@render bubble()}
+{/if}
+
+{#snippet bubble()}
+	<span
+		class="bubble"
+		class:bold
+		class:hoverable={!!onclick}
+		style="{colours
+			? `background-color: ${colours.backgroundColour}; color: ${colours.colour};`
+			: ''} padding: var(--bubble-padding, {verticalPadding} {horizontalPadding}); font-size: {fontSize}; border-radius: {borderRadius}"
+		>{#if label}{label}:&nbsp;{/if}{options?.length
+			? options.find((it) => it.value === value)?.label
+			: value}{#if icon}<div class="icon"><Icon {...icon} /></div>{/if}</span
+	>
+{/snippet}
+
+<style>button.contents {
+  display: contents;
+  cursor: pointer;
+}
+
+.bubble {
+  margin: 0;
+  background-color: #dae0e5;
+  color: var(--bubble-text-colour, var(--colour, #3a4952));
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 0.75rem;
+  line-height: var(--line-height, inherit);
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+}
+.bubble.hoverable:hover {
+  background-color: #cbd4da;
+}
+.bubble.bold {
+  font-weight: 700;
+}</style>

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

@@ -0,0 +1,21 @@
+import type { Colour } from '../scss/colours.js';
+import type { SelectOption } from '../Types/Internal/SelectOption.js';
+import { Size } from '../Types/Internal/Size.js';
+export interface BubbleColour {
+    colour: Colour;
+    backgroundColour: Colour;
+}
+export interface BubbleProps {
+    value: string;
+    onclick?: () => void;
+    icon?: PartialIconProps;
+    bold?: boolean;
+    size?: Size;
+    label?: string;
+    options?: SelectOption<unknown>[];
+    colours?: BubbleColour | null | undefined;
+}
+import { type PartialIconProps } from './Icon.svelte';
+declare const Bubble: import("svelte").Component<BubbleProps, {}, "">;
+type Bubble = ReturnType<typeof Bubble>;
+export default Bubble;