@functionalcms/svelte-components 4.36.10 → 5.0.0-beta1

package/dist/components/Styling.d.ts

@@ -1,59 +0,0 @@
-export declare enum Justify {
-    Start = "justify-start",
-    End = "justify-end",
-    Center = "justify-center",
-    Between = "justify-between",
-    Around = "justify-around"
-}
-export declare enum AlignItmes {
-    Start = "items-start ",
-    End = "items-end",
-    Center = "items-center",
-    Baseline = "items-baseline",
-    Stretch = "items-stretch"
-}
-export declare enum Placement {
-    Start = "start",
-    End = "end",
-    Top = "top",
-    Up = "up",
-    Bottom = "bottom",
-    Content = "content"
-}
-export declare enum Orientation {
-    Row = "flex-row",
-    Column = "flex-column",
-    DynamicRow = "flex-row-dynamic"
-}
-export declare enum Position {
-    Left = 0,
-    Middle = 1,
-    Right = 2
-}
-export declare enum Sizes {
-    V0 = 0,
-    V2 = 2,
-    V4 = 4,
-    V6 = 6,
-    V8 = 8,
-    V10 = 10,
-    V12 = 12,
-    V14 = 14,
-    V16 = 16,
-    V18 = 18,
-    V20 = 20,
-    V24 = 24,
-    V32 = 32,
-    V36 = 36,
-    V40 = 40,
-    V48 = 48,
-    V56 = 56,
-    V64 = 64,
-    V72 = 72,
-    V80 = 80
-}
-export declare enum ComponentSize {
-    Small = "small",
-    Normal = "",
-    Large = "large"
-}

package/dist/components/Styling.js

@@ -1,66 +0,0 @@
-export var Justify;
-(function (Justify) {
-    Justify["Start"] = "justify-start";
-    Justify["End"] = "justify-end";
-    Justify["Center"] = "justify-center";
-    Justify["Between"] = "justify-between";
-    Justify["Around"] = "justify-around";
-})(Justify || (Justify = {}));
-export var AlignItmes;
-(function (AlignItmes) {
-    AlignItmes["Start"] = "items-start ";
-    AlignItmes["End"] = "items-end";
-    AlignItmes["Center"] = "items-center";
-    AlignItmes["Baseline"] = "items-baseline";
-    AlignItmes["Stretch"] = "items-stretch";
-})(AlignItmes || (AlignItmes = {}));
-export var Placement;
-(function (Placement) {
-    Placement["Start"] = "start";
-    Placement["End"] = "end";
-    Placement["Top"] = "top";
-    Placement["Up"] = "up";
-    Placement["Bottom"] = "bottom";
-    Placement["Content"] = "content";
-})(Placement || (Placement = {}));
-export var Orientation;
-(function (Orientation) {
-    Orientation["Row"] = "flex-row";
-    Orientation["Column"] = "flex-column";
-    Orientation["DynamicRow"] = "flex-row-dynamic";
-})(Orientation || (Orientation = {}));
-export var Position;
-(function (Position) {
-    Position[Position["Left"] = 0] = "Left";
-    Position[Position["Middle"] = 1] = "Middle";
-    Position[Position["Right"] = 2] = "Right";
-})(Position || (Position = {}));
-export var Sizes;
-(function (Sizes) {
-    Sizes[Sizes["V0"] = 0] = "V0";
-    Sizes[Sizes["V2"] = 2] = "V2";
-    Sizes[Sizes["V4"] = 4] = "V4";
-    Sizes[Sizes["V6"] = 6] = "V6";
-    Sizes[Sizes["V8"] = 8] = "V8";
-    Sizes[Sizes["V10"] = 10] = "V10";
-    Sizes[Sizes["V12"] = 12] = "V12";
-    Sizes[Sizes["V14"] = 14] = "V14";
-    Sizes[Sizes["V16"] = 16] = "V16";
-    Sizes[Sizes["V18"] = 18] = "V18";
-    Sizes[Sizes["V20"] = 20] = "V20";
-    Sizes[Sizes["V24"] = 24] = "V24";
-    Sizes[Sizes["V32"] = 32] = "V32";
-    Sizes[Sizes["V36"] = 36] = "V36";
-    Sizes[Sizes["V40"] = 40] = "V40";
-    Sizes[Sizes["V48"] = 48] = "V48";
-    Sizes[Sizes["V56"] = 56] = "V56";
-    Sizes[Sizes["V64"] = 64] = "V64";
-    Sizes[Sizes["V72"] = 72] = "V72";
-    Sizes[Sizes["V80"] = 80] = "V80";
-})(Sizes || (Sizes = {}));
-export var ComponentSize;
-(function (ComponentSize) {
-    ComponentSize["Small"] = "small";
-    ComponentSize["Normal"] = "";
-    ComponentSize["Large"] = "large";
-})(ComponentSize || (ComponentSize = {}));

package/dist/components/blog/blog.d.ts

@@ -1,20 +0,0 @@
-export interface BlogPost {
-    slug: string;
-    title: string;
-    author: string;
-    description: string;
-    date: string;
-    published: boolean;
-}
-export interface MdsvexFile {
-    default: any;
-    metadata: Record<string, string>;
-}
-export type MdsvexResolver = () => Promise<MdsvexFile>;
-export declare function listAllPosts(page?: number, postCount?: number): Promise<{
-    posts: BlogPost[];
-}>;
-export declare function importPost(loadEvent: any): Promise<{
-    component: any;
-    frontmatter: Record<string, string> | undefined;
-}>;

package/dist/components/blog/blog.js

@@ -1,29 +0,0 @@
-const MAX_POSTS = 25;
-const slugFromPath = (path) => path.match(/([\w-]+)\.(svelte\.md|md|svx)/i)?.[1] ?? null;
-export async function listAllPosts(page = 0, postCount = MAX_POSTS) {
-    const modules = import.meta.glob(`/src/posts/*.{md,svx,svelte.md}`);
-    const postPromises = Object.entries(modules).map(([path, resolver]) => resolver().then((post) => ({
-        slug: slugFromPath(path),
-        ...post.metadata
-    })));
-    const posts = await Promise.all(postPromises);
-    const publishedPosts = posts.filter((post) => post.published).slice(page, postCount);
-    publishedPosts.sort((a, b) => (new Date(a.date) > new Date(b.date) ? -1 : 1));
-    return { posts: publishedPosts };
-}
-export async function importPost(loadEvent) {
-    const modules = import.meta.glob(`/src/posts/*.{md,svx,svelte.md}`);
-    let match = {};
-    for (const [path, resolver] of Object.entries(modules)) {
-        if (slugFromPath(path) === loadEvent.params.slug) {
-            match = { path, resolver: resolver };
-            break;
-        }
-    }
-    const post = await match?.resolver?.();
-    return {
-        component: post?.default,
-        frontmatter: post?.metadata
-    };
-}
-;

package/dist/components/dynamic/CopyToClipboard.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from "svelte";
-
-  export let text: string;
-
-  const dispatch = createEventDispatcher<{ copy: string; fail: never }>();
-
-  const copy = () => {
-    navigator.clipboard.writeText(text).then(
-      () => dispatch("copy", text),
-      (e) => dispatch("fail")
-    );
-  };
-</script>
-
-<slot {copy} />

package/dist/components/dynamic/CopyToClipboard.svelte.d.ts

@@ -1,36 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const CopyToClipboard: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    text: string;
-}, {
-    default: {
-        copy: () => void;
-    };
-}>, {
-    copy: CustomEvent<string>;
-    fail: CustomEvent<never>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {
-        copy: () => void;
-    };
-}, {}, string>;
-type CopyToClipboard = InstanceType<typeof CopyToClipboard>;
-export default CopyToClipboard;

package/dist/components/dynamic/DynamicButton.d.ts

@@ -1 +0,0 @@
-export declare const executeRest: (url: string, method?: "POST" | "GET" | "PUT" | "DELETE") => Promise<boolean>;

package/dist/components/dynamic/DynamicButton.js

@@ -1,10 +0,0 @@
-export const executeRest = async (url, method = "GET") => {
-    let fetchUrl = url;
-    if (!fetchUrl.startsWith('http')) {
-        fetchUrl = window.location.origin + fetchUrl;
-    }
-    const response = await fetch(fetchUrl, {
-        method: method,
-    });
-    return response.status === 200;
-};

package/dist/components/dynamic/DynamicButton.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-    import { Button, Loader } from "@functionalcms/svelte-components";
-
-    interface Props {
-        label: string;
-        click: () => Promise<boolean>;
-
-        success?: () => void;
-        failure?: () => void;
-    }
-
-    let { label, click, success, failure }: Props = $props();
-    let isLoading = $derived(false);
-
-    const whenButtonIsclicked = async () => {
-        if (isLoading === false) {
-            isLoading = true;
-
-            const response = await click();
-
-            response ? success?.() : failure?.();
-
-            isLoading = false;
-        }
-    };
-</script>
-
-<Button type="button" click={whenButtonIsclicked}>
-    {#if isLoading}
-        <Loader size="small" />
-    {/if}
-    {label}
-</Button>

package/dist/components/dynamic/DynamicButton.svelte.d.ts

@@ -1,9 +0,0 @@
-interface Props {
-    label: string;
-    click: () => Promise<boolean>;
-    success?: () => void;
-    failure?: () => void;
-}
-declare const DynamicButton: import("svelte").Component<Props, {}, "">;
-type DynamicButton = ReturnType<typeof DynamicButton>;
-export default DynamicButton;

package/dist/components/form/Button.svelte

@@ -1,389 +0,0 @@
-<script lang="ts">
-	import { cn } from '../../utils.js';
-	import type { Snippet } from 'svelte';
-	import type { EventHandler } from 'svelte/elements';
-
-	interface Props {
-		children: Snippet;
-		css: string;
-		style: string;
-		type?: 'submit' | 'reset' | 'button' | 'link';
-		href: string;
-		mode?: string;
-		size?: string;
-		isPrimary: boolean;
-		isBordered?: boolean;
-		isCapsule?: boolean;
-		isGrouped?: boolean;
-		isBlock?: boolean;
-		isLink?: boolean;
-		isBlank?: boolean;
-		isDisabled?: boolean;
-		role?: string;
-		isCircle?: boolean;
-		isRounded?: boolean;
-		isSkinned?: boolean;
-		ariaSelected?: boolean;
-		ariaControls?: string;
-		tabIndex?: number;
-		ariaLabel: string;
-		click?: (event: MouseEvent) => void;
-		keydown?: (event: KeyboardEvent) => void;
-	}
-
-	let {
-		children,
-		css = '',
-		style = '',
-		href = '',
-		mode = undefined,
-		size = undefined,
-		type = 'button',
-		isPrimary = false,
-		isBordered = false,
-		isCapsule = false,
-		isGrouped = false,
-		isBlock = false,
-		isLink = false,
-		isBlank = false,
-		isDisabled = false,
-		role = undefined,
-		isCircle = false,
-		isRounded = false,
-		isSkinned = true,
-		ariaSelected = undefined,
-		ariaControls = undefined,
-		tabIndex = 0,
-		click = undefined,
-		keydown = undefined,
-		ariaLabel = '',
-		...restProps
-	}: Partial<Props> = $props();
-
-	let klasses = $derived(
-		cn(
-			isSkinned ? 'btn' : 'btn-base',
-			mode ? `btn-${mode}` : '',
-			size ? `btn-${size}` : '',
-			isBordered ? 'btn-bordered' : '',
-			isCapsule ? 'btn-capsule ' : '',
-			isGrouped ? 'btn-grouped' : '',
-			isBlock ? 'btn-block' : '',
-			isCircle ? 'btn-circle' : '',
-			isRounded ? 'btn-rounded' : '',
-			isDisabled ? 'disabled' : '',
-			isBlank ? 'btn-blank' : '',
-			isLink ? 'btn-link' : '',
-			css ? `${css}` : ''
-		)
-	);
-</script>
-
-{#if type == 'link'}
-	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-	<a
-		class={klasses}
-		{href}
-		{style}
-		{role}
-		aria-selected={ariaSelected}
-		aria-controls={ariaControls}
-		aria-label={ariaLabel}
-		tabindex={tabIndex}
-		onclick={click}
-		onkeydown={keydown}
-		{...restProps}
-	>
-		{@render children?.()}
-	</a>
-{:else}
-	<button
-		{type}
-		class={klasses}
-		{style}
-		{role}
-		aria-selected={ariaSelected}
-		aria-controls={ariaControls}
-		aria-label={ariaLabel}
-		tabindex={tabIndex}
-		disabled={isDisabled}
-		onclick={click}
-		onkeydown={keydown}
-		{...restProps}
-	>
-		{@render children?.()}
-	</button>
-{/if}
-
-<style>.btn-base {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  user-select: none;
-  appearance: none;
-  cursor: pointer;
-  box-sizing: border-box;
-  transition-property: all;
-  transition-duration: var(--timing-medium);
-}
-
-.btn {
-  /* TODO test this fallback override syntax is correct */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  user-select: none;
-  appearance: none;
-  cursor: pointer;
-  box-sizing: border-box;
-  transition-property: all;
-  transition-duration: var(--timing-medium);
-}
-
-.btn-skin,
-.btn {
-  color: var(--btn-font-color, var(--dark));
-  background-color: var(--btn-bgcolor, var(--gray-light));
-  border-color: var(--btn-bgcolor, var(--gray-light));
-  /* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
-  border-style: solid;
-  border-width: var(--btn-border-size, 1px);
-  font-family: var(--btn-font-family, var(--font-family-body));
-  font-weight: var(--btn-font-weight, 400);
-  font-size: var(--btn-font-size, 1rem);
-  /* this can be overriden, but it might mess with the balance of the button heights across variants */
-  line-height: var(--line-height, var(--fluid-20, 1.25rem));
-  padding-block-start: var(--vertical-pad, 0.5rem);
-  padding-block-end: var(--vertical-pad, 0.5rem);
-  padding-inline-start: var(--side-padding, 0.75rem);
-  padding-inline-end: var(--side-padding, 0.75rem);
-  text-decoration: none;
-  text-align: center;
-  outline: none;
-}
-
-.btn:visited {
-  color: var(--btn-font-color, var(--dark));
-}
-
-.btn:hover {
-  opacity: 85%;
-  text-decoration: none;
-}
-
-.btn:active {
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
-  text-decoration: none;
-  transition-duration: 0s;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-.btn:focus {
-  box-shadow: 0 0 0 var(--focus-ring-outline-width) var(--focus-ring-color);
-  /* Needed for High Contrast mode */
-  outline: var(--focus-ring-outline-width) var(--focus-ring-outline-style) var(--focus-ring-outline-color);
-  transition: box-shadow var(--timing-fast) ease-out;
-  /* In order for the focused element's box-shadow to appear above its siblings we need to
-  establish a new stacking context: https://stackoverflow.com/a/28042700 */
-  isolation: isolate;
-}
-
-/*
-* Disabled State
-*
-* The disabled state uses the class .disabled, is-disabled,
-* and the form attribute disabled="disabled".
-* The use of !important is only added because this is a state
-* that must be applied to all buttons when in a disabled state.
-*/
-.btn.disabled,
-.btn:disabled {
-  top: 0 !important;
-  background: var(--btn-disabled-bg, var(--gray-mid-dark)) !important;
-  text-shadow: 0 1px 1px rgb(255, 255, 255) !important;
-  /* primary, secondary, natural, all look same when disabled; and we don't want to
-  have an inadvertant looking blue primary border when disabled so it's transparent */
-  border-color: transparent;
-  color: var(--btn-disabled-color, var(--gray-dark)) !important;
-  cursor: default !important;
-  appearance: none !important;
-  box-shadow: none !important;
-  opacity: 80% !important;
-}
-
-.btn-primary {
-  background-color: var(--btn-primary, var(--primary));
-  border-color: var(--btn-primary, var(--primary));
-  color: var(--btn-primary-color, var(--light));
-}
-
-/* Border and font is primary. When hovered, we invert with primary background and white font */
-.btn-primary.btn-bordered {
-  color: var(--btn-primary, var(--primary));
-}
-
-.btn-primary.btn-bordered:hover,
-.btn-primary.btn-bordered:focus {
-  background-color: var(--btn-primary, var(--primary));
-  color: var(--btn-primary-color, var(--light));
-}
-
-.btn-primary:visited {
-  color: var(--btn-primary-color, var(--light));
-}
-
-.btn-secondary {
-  background-color: var(--btn-secondary, var(--secondary));
-  border-color: var(--btn-secondary, var(--secondary));
-  color: var(--btn-secondary-color, var(--light));
-}
-
-/* Border and font is secondary. When hovered, we invert with secondary background and white font */
-.btn-secondary.btn-bordered {
-  color: var(--btn-secondary, var(--secondary));
-}
-
-.btn-secondary.btn-bordered:hover,
-.btn-secondary.btn-bordered:focus {
-  background-color: var(--btn-secondary, var(--secondary));
-  color: var(--btn-secondary-color, var(--light));
-}
-
-.btn-secondary:visited {
-  color: var(--btn-secondary-color, var(--light));
-}
-
-/*
-/**
-  * Border Buttons
-  */
-.btn-bordered {
-  border-width: 1px;
-  background: transparent;
-}
-
-/**
-  * Sizes
-  */
-.btn-large {
-  font-size: calc(var(--btn-font-size, 1rem) + 0.25rem);
-  height: 3rem;
-  line-height: 3rem;
-  padding: 0 3rem;
-}
-
-.btn-small {
-  font-size: calc(var(--btn-font-size, 1rem) - 0.25rem);
-  height: 2rem;
-  line-height: 2rem;
-  padding: 0 2rem;
-}
-
-/**
-  * Rounded
-  */
-.btn-rounded {
-  border-radius: var(--btn-radius, var(--radius, 0.25rem));
-}
-
-.btn-pill {
-  border-radius: 200px;
-}
-
-/*
-  * Size Adjustment for equal height & width buttons
-  *
-  * Remove padding
-  */
-.btn-circle {
-  border-radius: 100%;
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0 !important;
-}
-
-.btn-circle-large {
-  font-size: calc(var(--btn-font-size, 1rem) + 0.25rem);
-  width: 3rem;
-  height: 3rem;
-}
-
-.btn-circle-small {
-  font-size: calc(var(--btn-font-size, 1rem) - 0.25rem);
-  width: 2rem;
-  height: 2rem;
-}
-
-/**
- * Button Block (stacked)
- */
-.btn-block {
-  width: 100%;
-}
-
-/* This is a utility class used if you literally want to stack block buttons one after another.
-Apply this class to the nth-of-type(2) onwards to ensure the borders line up properly. */
-.btn-block-following {
-  margin-block-start: -1px;
-}
-
-.btn-grouped {
-  border-radius: var(--btn-radius, var(--radius, 0.25rem));
-}
-
-.btn-grouped:not(:last-child) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  margin-inline-end: -1px;
-}
-
-.btn-grouped:not(:first-child) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.btn-capsule {
-  --padding-side: calc(var(--side-padding, 0.75rem) * 1.5);
-  border-radius: var(--radius-capsule);
-  padding-inline-start: var(--padding-side);
-  padding-inline-end: var(--padding-side);
-}
-
-@media (prefers-reduced-motion), (update: slow) {
-  .btn,
-  .btn:focus {
-    transition-duration: 0.001ms !important;
-  }
-}
-/**
- * Invisible buttons. Generally used for a Cancel or icon button that behaves like a button,
- * semantically and for a11y, but, does so without all the typical "button chrome" behind it.
- */
-:is(.btn-link, .btn-blank) {
-  font-family: var(--btn-font-family, var(--font-family-body));
-  font-size: var(--btn-font-size, 1rem);
-  background-color: transparent;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  transition: none;
-}
-
-/* Since blank buttons can be used for things like input addons we don't want to go crazy
-on the side padding. As such, these have a good bit less then regular buttons. */
-.btn-blank {
-  --btn-blank-side-padding: var(--btn-blank-side-padding, 0.25rem);
-  padding-inline-start: var(--btn-blank-side-padding);
-  padding-inline-end: var(--btn-blank-side-padding);
-}
-
-/* A button blank with link color text */
-.btn-link {
-  color: var(--btn-primary, var(--primary));
-}
-
-.btn-link:hover {
-  cursor: pointer;
-}</style>