sveltacular 0.0.76 → 1.0.0

package/dist/generic/chip/chip.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import type { ComponentSize } from '../../types/size.js';
+
+	let {
+		label,
+		removable = false,
+		size = 'md' as ComponentSize,
+		variant = 'standard' as 'standard' | 'positive' | 'negative',
+		onRemove = undefined
+	}: {
+		label: string;
+		removable?: boolean;
+		size?: ComponentSize;
+		variant?: 'standard' | 'positive' | 'negative';
+		onRemove?: (() => void) | undefined;
+	} = $props();
+</script>
+
+<div class="chip {size} {variant}">
+	<span class="label">{label}</span>
+	{#if removable}
+		<button type="button" class="remove" onclick={onRemove} aria-label="Remove {label}">
+			×
+		</button>
+	{/if}
+</div>
+
+<style>.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  background-color: var(--chip-bg, #e0e0e0);
+  color: var(--chip-fg, #000);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.chip .label {
+  line-height: 1.5;
+}
+.chip .remove {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  margin-left: 0.25rem;
+  font-size: 1.25rem;
+  line-height: 1;
+  color: inherit;
+  opacity: 0.7;
+  transition: opacity 0.2s ease-in-out;
+}
+.chip .remove:hover {
+  opacity: 1;
+}
+.chip .remove:focus {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  border-radius: 0.125rem;
+}
+.chip.sm {
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+}
+.chip.md {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+}
+.chip.lg {
+  padding: 0.375rem 1rem;
+  font-size: 1rem;
+}
+.chip.standard {
+  background-color: var(--chip-standard-bg, #e0e0e0);
+  color: var(--chip-standard-fg, #000);
+}
+.chip.positive {
+  background-color: var(--chip-positive-bg, #c8e6c9);
+  color: var(--chip-positive-fg, #2e7d32);
+}
+.chip.negative {
+  background-color: var(--chip-negative-bg, #ffcdd2);
+  color: var(--chip-negative-fg, #c62828);
+}</style>
+
+
+
+
+

package/dist/generic/chip/chip.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentSize } from '../../types/size.js';
+type $$ComponentProps = {
+    label: string;
+    removable?: boolean;
+    size?: ComponentSize;
+    variant?: 'standard' | 'positive' | 'negative';
+    onRemove?: (() => void) | undefined;
+};
+declare const Chip: import("svelte").Component<$$ComponentProps, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;

package/dist/generic/date/date-time.svelte

@@ -1,67 +1,89 @@
-<script>import toAgo from "../../helpers/ago.js";
-export let value = "";
-export let lang = "en-us";
-export let type = "datetime";
-export let style = "medium";
-export let dateTimeSeparator = void 0;
-const tzStyleMap = {
-  full: "long",
-  long: "longGeneric",
-  medium: "short",
-  short: "shortGeneric"
-};
-const getTimezone = () => {
-  return Intl.DateTimeFormat(lang, {
-    timeZoneName: tzStyleMap[style]
-  }).format(date).split(", ")[1];
-};
-const getDate = () => {
-  if (!["datetime", "date"].includes(type))
-    return "";
-  return Intl.DateTimeFormat(lang, {
-    dateStyle: style
-  }).format(date);
-};
-const getTime = () => {
-  if (!["datetime", "time"].includes(type))
-    return "";
-  const time = Intl.DateTimeFormat(lang, {
-    timeStyle: style
-  }).format(date);
-  if (style == "medium") {
-    const [hms, ampm] = time.split(" ");
-    const [hours, minutes] = hms.split(":");
-    return `${hours}:${minutes} ${ampm}`;
-  }
-  return time;
-};
-const getSeparator = () => {
-  if (dateTimeSeparator === void 0) {
-    return type == "ymdhm" || type == "ymdhms" ? " " : " @ ";
-  }
-  return dateTimeSeparator;
-};
-$:
-  date = value ? new Date(value) : /* @__PURE__ */ new Date();
-$:
-  text = (() => {
-    if (type == "ago")
-      return toAgo(date, style);
-    if (type == "ymd") {
-      const [year, month, day] = date.toISOString().split("T")[0].split("-");
-      return `${year}-${month}-${day}`;
-    }
-    if (["ymdhm", "ymdhms", "ymdhmt", "ymdhmts"].includes(type)) {
-      const [year, month, day] = date.toISOString().split("T")[0].split("-");
-      const [hours, minutes, seconds] = date.toISOString().split("T")[1].split(":");
-      const separator = dateTimeSeparator === void 0 ? " " : dateTimeSeparator;
-      const dateTime = type == "ymdhms" ? `${year}-${month}-${day}${separator}${hours}:${minutes}:${seconds.substring(0, 2)}` : `${year}-${month}-${day}${separator}${hours}:${minutes}`;
-      return type.includes("t") ? `${dateTime} ${getTimezone()}` : dateTime;
-    }
-    return type == "date" ? getDate() : type == "time" ? getTime() : `${getDate()}${getSeparator()}${getTime()}`;
-  })();
-$:
-  datetime = date.toISOString();
+<script lang="ts">
+	import toAgo from '../../helpers/ago.js';
+	import type { DateTimeVariant, DateType, TZStyle } from '../../types/date.js';
+
+	let {
+		value = '',
+		lang = 'en-us',
+		type = 'datetime' as DateType,
+		variant = 'medium' as DateTimeVariant,
+		dateTimeSeparator = undefined
+	}: {
+		value?: string | number | Date;
+		lang?: string;
+		type?: DateType;
+		variant?: DateTimeVariant;
+		dateTimeSeparator?: string;
+	} = $props();
+
+	const tzStyleMap: Record<DateTimeVariant, TZStyle> = {
+		full: 'long',
+		long: 'longGeneric',
+		medium: 'short',
+		short: 'shortGeneric'
+	};
+
+	const getTimezone = () => {
+		return Intl.DateTimeFormat(lang, {
+			timeZoneName: tzStyleMap[variant]
+		})
+			.format(date)
+			.split(', ')[1];
+	};
+
+	const getDate = () => {
+		if (!['datetime', 'date'].includes(type)) return '';
+		return Intl.DateTimeFormat(lang, {
+			dateStyle: variant
+		}).format(date);
+	};
+
+	const getTime = () => {
+		if (!['datetime', 'time'].includes(type)) return '';
+		const time = Intl.DateTimeFormat(lang, {
+			timeStyle: variant
+		}).format(date);
+		if (variant == 'medium') {
+			const [hms, ampm] = time.split(' ');
+			const [hours, minutes] = hms.split(':');
+			return `${hours}:${minutes} ${ampm}`;
+		}
+		return time;
+	};
+
+	const getSeparator = () => {
+		if (dateTimeSeparator === undefined) {
+			return type == 'ymdhm' || type == 'ymdhms' ? ' ' : ' @ ';
+		}
+		return dateTimeSeparator;
+	};
+
+	let date = $derived(value ? new Date(value) : new Date());
+	let text = $derived(
+		(() => {
+			if (type == 'ago') return toAgo(date, variant);
+			if (type == 'ymd') {
+				const [year, month, day] = date.toISOString().split('T')[0].split('-');
+				return `${year}-${month}-${day}`;
+			}
+			if (['ymdhm', 'ymdhms', 'ymdhmt', 'ymdhmts'].includes(type)) {
+				const [year, month, day] = date.toISOString().split('T')[0].split('-');
+				const [hours, minutes, seconds] = date.toISOString().split('T')[1].split(':');
+				const separator = dateTimeSeparator === undefined ? ' ' : dateTimeSeparator;
+				const dateTime =
+					type == 'ymdhms'
+						? `${year}-${month}-${day}${separator}${hours}:${minutes}:${seconds.substring(0, 2)}`
+						: `${year}-${month}-${day}${separator}${hours}:${minutes}`;
+				return type.includes('t') ? `${dateTime} ${getTimezone()}` : dateTime;
+			}
+			return type == 'date'
+				? getDate()
+				: type == 'time'
+					? getTime()
+					: `${getDate()}${getSeparator()}${getTime()}`;
+		})()
+	);
+	let datetime = $derived(date.toISOString());
 </script>
 
 <time {datetime}>{text}</time>

package/dist/generic/date/date-time.svelte.d.ts

@@ -1,21 +1,11 @@
-import { SvelteComponent } from "svelte";
-import type { DateTimeStyle, DateType } from '../../types/date.js';
-declare const __propDef: {
-    props: {
-        value?: string | number | Date | undefined;
-        lang?: string | undefined;
-        type?: DateType | undefined;
-        style?: DateTimeStyle | undefined;
-        dateTimeSeparator?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { DateTimeVariant, DateType } from '../../types/date.js';
+type $$ComponentProps = {
+    value?: string | number | Date;
+    lang?: string;
+    type?: DateType;
+    variant?: DateTimeVariant;
+    dateTimeSeparator?: string;
 };
-export type DateTimeProps = typeof __propDef.props;
-export type DateTimeEvents = typeof __propDef.events;
-export type DateTimeSlots = typeof __propDef.slots;
-export default class DateTime extends SvelteComponent<DateTimeProps, DateTimeEvents, DateTimeSlots> {
-}
-export {};
+declare const DateTime: import("svelte").Component<$$ComponentProps, {}, "">;
+type DateTime = ReturnType<typeof DateTime>;
+export default DateTime;

package/dist/generic/divider/divider.svelte.d.ts

@@ -1,23 +1,26 @@
-/** @typedef {typeof __propDef.props}  DividerProps */
-/** @typedef {typeof __propDef.events}  DividerEvents */
-/** @typedef {typeof __propDef.slots}  DividerSlots */
-export default class Divider extends SvelteComponent<{
+export default Divider;
+type Divider = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type DividerProps = typeof __propDef.props;
-export type DividerEvents = typeof __propDef.events;
-export type DividerSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const Divider: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/generic/dot/dot.svelte

@@ -1,9 +1,18 @@
-<script>export let color = "#b7b7b7";
-export let shadow = false;
-export let size = "md";
+<script lang="ts">
+	import type { FormFieldSizeOptions } from '../../index.js';
+
+	let {
+		color = '#b7b7b7',
+		shadow = false,
+		size = 'md' as FormFieldSizeOptions
+	}: {
+		color?: string;
+		shadow?: boolean;
+		size?: FormFieldSizeOptions;
+	} = $props();
 </script>
 
-<span style="background: {color}" class="{size} {shadow ? 'shadow' : ''}" />
+<span style="background: {color}" class="{size} {shadow ? 'shadow' : ''}"></span>
 
 <style>span {
   display: inline-block;

package/dist/generic/dot/dot.svelte.d.ts

@@ -1,19 +1,9 @@
-import { SvelteComponent } from "svelte";
 import type { FormFieldSizeOptions } from '../../index.js';
-declare const __propDef: {
-    props: {
-        color?: string | undefined;
-        shadow?: boolean | undefined;
-        size?: FormFieldSizeOptions | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    color?: string;
+    shadow?: boolean;
+    size?: FormFieldSizeOptions;
 };
-export type DotProps = typeof __propDef.props;
-export type DotEvents = typeof __propDef.events;
-export type DotSlots = typeof __propDef.slots;
-export default class Dot extends SvelteComponent<DotProps, DotEvents, DotSlots> {
-}
-export {};
+declare const Dot: import("svelte").Component<$$ComponentProps, {}, "">;
+type Dot = ReturnType<typeof Dot>;
+export default Dot;

package/dist/generic/dropdown-item/dropdown-item.svelte

@@ -1,20 +1,32 @@
-<script>import { createEventDispatcher } from "svelte";
-export let href = void 0;
-export let target = void 0;
-export let tabindex = 0;
-const dispatch = createEventDispatcher();
-const onClick = () => {
-  dispatch("click");
-};
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		href = undefined,
+		target = undefined,
+		tabindex = 0,
+		onClick = undefined,
+		children
+	}: {
+		href?: string | undefined;
+		target?: string | undefined;
+		tabindex?: number;
+		onClick?: (() => void) | undefined;
+		children: Snippet;
+	} = $props();
+
+	const handleClick = () => {
+		onClick?.();
+	};
 </script>
 
 {#if !href}
-	<span class="item" on:click={() => onClick()} on:keyup={() => onClick()} role="link" {tabindex}>
-		<slot />
+	<span class="item" onclick={handleClick} onkeyup={handleClick} role="link" {tabindex}>
+		{@render children?.()}
 	</span>
 {:else}
-	<a {href} {target} class="item" on:click={() => onClick()} {tabindex}>
-		<slot />
+	<a {href} {target} class="item" onclick={handleClick} {tabindex}>
+		{@render children?.()}
 	</a>
 {/if}
 

package/dist/generic/dropdown-item/dropdown-item.svelte.d.ts

@@ -1,22 +1,11 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        href?: string | undefined;
-        target?: string | undefined;
-        tabindex?: number | undefined;
-    };
-    events: {
-        click: CustomEvent<void>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    href?: string | undefined;
+    target?: string | undefined;
+    tabindex?: number;
+    onClick?: (() => void) | undefined;
+    children: Snippet;
 };
-export type DropdownItemProps = typeof __propDef.props;
-export type DropdownItemEvents = typeof __propDef.events;
-export type DropdownItemSlots = typeof __propDef.slots;
-export default class DropdownItem extends SvelteComponent<DropdownItemProps, DropdownItemEvents, DropdownItemSlots> {
-}
-export {};
+declare const DropdownItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type DropdownItem = ReturnType<typeof DropdownItem>;
+export default DropdownItem;

package/dist/generic/email/email.svelte

@@ -1,13 +1,15 @@
-<script>import EnvelopeIcon from "../../icons/envelope-icon.svelte";
-export let emailAddress = "";
+<script lang="ts">
+	import EnvelopeIcon from '../../icons/envelope-icon.svelte';
+
+	let { value }: { value: string } = $props();
 </script>
 
-<a href="mailto:{emailAddress}" title="Email Address">
+<a href="mailto:{value}" title="Email Address">
 	<span class="icon">
 		<EnvelopeIcon />
 	</span>
 	<span class="address">
-		{emailAddress}
+		{value}
 	</span>
 </a>
 

package/dist/generic/email/email.svelte.d.ts

@@ -1,16 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        emailAddress?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    value: string;
 };
-export type EmailProps = typeof __propDef.props;
-export type EmailEvents = typeof __propDef.events;
-export type EmailSlots = typeof __propDef.slots;
-export default class Email extends SvelteComponent<EmailProps, EmailEvents, EmailSlots> {
-}
-export {};
+declare const Email: import("svelte").Component<$$ComponentProps, {}, "">;
+type Email = ReturnType<typeof Email>;
+export default Email;

package/dist/generic/empty/empty.svelte

@@ -1,14 +1,27 @@
-<script>export let text = "No data to display";
-export let size = "md";
-export let orientation = "vertical";
-export let reverse = false;
-export let align = "center";
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		text = 'No data to display',
+		size = 'md' as 'sm' | 'md' | 'lg' | 'xl',
+		orientation = 'vertical' as 'horizontal' | 'vertical',
+		reverse = false,
+		align = 'center' as 'center' | 'start' | 'end',
+		children = undefined
+	}: {
+		text?: string;
+		size?: 'sm' | 'md' | 'lg' | 'xl';
+		orientation?: 'horizontal' | 'vertical';
+		reverse?: boolean;
+		align?: 'center' | 'start' | 'end';
+		children?: Snippet;
+	} = $props();
 </script>
 
 <div class="empty {size} {orientation} {reverse ? 'reverse' : ''} {align}">
-	{#if $$slots.default}
+	{#if children}
 		<div class="icon">
-			<slot />
+			{@render children?.()}
 		</div>
 	{/if}
 	<div class="text">
@@ -22,8 +35,9 @@ export let align = "center";
   align-items: center;
   justify-content: center;
   text-align: center;
-  color: var(--color-text-secondary, rgba(150, 150, 150, 0.5));
+  color: var(--gray-500);
   font-weight: 500;
+  padding: var(--spacing-2xl);
 }
 
 .start {
@@ -36,7 +50,7 @@ export let align = "center";
 
 .horizontal {
   flex-direction: row;
-  gap: 1rem;
+  gap: var(--spacing-lg);
 }
 .horizontal.reverse {
   flex-direction: row-reverse;
@@ -46,38 +60,55 @@ export let align = "center";
   flex-direction: column-reverse;
 }
 
+.icon {
+  margin-bottom: var(--spacing-base);
+  color: var(--gray-400);
+  opacity: 0.8;
+}
+
+.text {
+  color: var(--gray-600);
+  font-size: var(--font-md);
+  line-height: 1.6;
+}
+
 .sm {
-  font-size: 1rem;
-  line-height: 1.5rem;
+  padding: var(--spacing-lg);
+}
+.sm .text {
+  font-size: var(--font-base);
 }
 .sm .icon {
-  height: 1.5rem;
-  width: 1.5rem;
+  height: 2rem;
+  width: 2rem;
 }
 
-.md {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
+.md .text {
+  font-size: var(--font-md);
 }
 .md .icon {
-  height: 2rem;
-  width: 2rem;
+  height: 3rem;
+  width: 3rem;
 }
 
 .lg {
-  font-size: 1.5rem;
-  line-height: 2rem;
+  padding: var(--spacing-2xl) var(--spacing-xl);
+}
+.lg .text {
+  font-size: var(--font-lg);
 }
 .lg .icon {
-  height: 3rem;
-  width: 3rem;
+  height: 4rem;
+  width: 4rem;
 }
 
 .xl {
-  font-size: 2rem;
-  line-height: 2.5rem;
+  padding: 4rem var(--spacing-2xl);
+}
+.xl .text {
+  font-size: var(--font-xl);
 }
 .xl .icon {
-  height: 4rem;
-  width: 4rem;
+  height: 5rem;
+  width: 5rem;
 }</style>