@marianmeres/stuic 1.46.0 → 1.48.0

package/dist/components/DismissibleMessage/DismissibleMessage.svelte

@@ -0,0 +1,93 @@
+<script context="module">import { slide } from "svelte/transition";
+import { twMerge } from "tailwind-merge";
+import { Thc, X } from "../../index.js";
+const themes = {
+  primary: "bg-stuic-primary/10   text-stuic-primary   dark:bg-stuic-primary   dark:text-white/90",
+  secondary: "bg-stuic-secondary/10 text-stuic-secondary dark:bg-stuic-secondary dark:text-white/90",
+  slate: "bg-slate-100          text-slate-800       dark:bg-slate-700       dark:text-slate-100",
+  gray: "bg-gray-100           text-gray-800        dark:bg-gray-700        dark:text-gray-100",
+  zinc: "bg-zinc-100           text-zinc-800        dark:bg-zinc-700        dark:text-zinc-100",
+  neutral: "bg-neutral-100        text-neutral-800     dark:bg-neutral-700     dark:text-neutral-100",
+  stone: "bg-stone-100          text-stone-800       dark:bg-stone-700       dark:text-stone-100",
+  red: "bg-red-100            text-red-800         dark:bg-red-800         dark:text-red-100",
+  orange: "bg-orange-100         text-orange-800      dark:bg-orange-800      dark:text-orange-100",
+  amber: "bg-amber-100          text-amber-800       dark:bg-amber-800       dark:text-amber-100",
+  yellow: "bg-yellow-100         text-yellow-800      dark:bg-yellow-800      dark:text-yellow-50",
+  lime: "bg-lime-100           text-lime-800        dark:bg-lime-800        dark:text-lime-100",
+  green: "bg-green-100          text-green-800       dark:bg-green-800       dark:text-green-100",
+  emerald: "bg-emerald-100        text-emerald-800     dark:bg-emerald-800     dark:text-emerald-50",
+  teal: "bg-teal-100           text-teal-800        dark:bg-teal-800        dark:text-teal-50",
+  cyan: "bg-cyan-100           text-cyan-800        dark:bg-cyan-800        dark:text-cyan-50",
+  sky: "bg-sky-100            text-sky-800         dark:bg-sky-800         dark:text-sky-50",
+  blue: "bg-blue-100           text-blue-800        dark:bg-blue-800        dark:text-blue-100",
+  indigo: "bg-indigo-100         text-indigo-800      dark:bg-indigo-800      dark:text-indigo-100",
+  violet: "bg-violet-100         text-violet-800      dark:bg-violet-800      dark:text-violet-100",
+  purple: "bg-purple-100         text-purple-800      dark:bg-purple-800      dark:text-purple-100",
+  fuchsia: "bg-fuchsia-100        text-fuchsia-800     dark:bg-fuchsia-800     dark:text-fuchsia-100",
+  pink: "bg-pink-100           text-pink-800        dark:bg-pink-800        dark:text-pink-100",
+  rose: "bg-rose-100           text-rose-800        dark:bg-rose-800        dark:text-rose-100"
+};
+export class DismissibleMessageConfig {
+  static preset = {
+    box: `mb-4 rounded flex text-sm`,
+    content: `flex-1 px-4 py-3`,
+    dismiss: `
+                hover:bg-black/5 dark:hover:bg-black/20
+                rounded rounded-l-none
+                px-3
+                flex items-center justify-center
+                group
+            `
+  };
+  static class = {
+    box: ``,
+    content: ``,
+    dismiss: ``
+  };
+}
+</script>
+
+<script>let _class = "";
+export { _class as class };
+export let classContent = "";
+export let classDismiss = "";
+export let duration = 150;
+export let message;
+export let onDismiss = () => message = null;
+export let theme = "primary";
+</script>
+
+{#if message}
+	<div
+		class={twMerge(
+			DismissibleMessageConfig.preset.box,
+			DismissibleMessageConfig.class.box,
+			themes[theme] ?? themes.primary,
+			_class
+		)}
+		transition:slide={{ duration }}
+	>
+		<div
+			class={twMerge(
+				DismissibleMessageConfig.preset.content,
+				DismissibleMessageConfig.class.content,
+				classContent
+			)}
+		>
+			<Thc thc={message} />
+		</div>
+
+		{#if typeof onDismiss === 'function'}
+			<button
+				class={twMerge(
+					DismissibleMessageConfig.preset.dismiss,
+					DismissibleMessageConfig.class.dismiss,
+					classDismiss
+				)}
+				on:click={() => onDismiss()}
+			>
+				<X class="opacity-75 group-hover:opacity-100" strokeWidth={1.5} />
+			</button>
+		{/if}
+	</div>
+{/if}

package/dist/components/DismissibleMessage/DismissibleMessage.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponent } from "svelte";
+import { type THC, type TW_COLORS } from '../../index.js';
+export declare class DismissibleMessageConfig {
+    static preset: {
+        box: string;
+        content: string;
+        dismiss: string;
+    };
+    static class: {
+        box: string;
+        content: string;
+        dismiss: string;
+    };
+}
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        classContent?: string | undefined;
+        classDismiss?: string | undefined;
+        duration?: number | undefined;
+        message: THC | null;
+        onDismiss?: (() => void) | null | undefined;
+        theme?: "primary" | TW_COLORS | "secondary" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DismissibleMessageProps = typeof __propDef.props;
+export type DismissibleMessageEvents = typeof __propDef.events;
+export type DismissibleMessageSlots = typeof __propDef.slots;
+export default class DismissibleMessage extends SvelteComponent<DismissibleMessageProps, DismissibleMessageEvents, DismissibleMessageSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { default as Button, ButtonConfig } from './components/Button/Button.svel
 export { default as SystemAwareColorScheme } from './components/ColorScheme/SystemAwareColorScheme.svelte';
 export { default as LocalColorScheme } from './components/ColorScheme/LocalColorScheme.svelte';
 export { ColorScheme } from './components/ColorScheme/color-scheme.js';
+export { default as DismissibleMessage, DismissibleMessageConfig, } from './components/DismissibleMessage/DismissibleMessage.svelte';
 export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer.svelte';
 export { default as HoverExpandableWidth } from './components/HoverExpandableWidth/HoverExpandableWidth.svelte';
 export { default as Field } from './components/Input/Field.svelte';
@@ -17,7 +18,7 @@ export { createNotificationsStore, NOTIFICATION_EVENT, type NotiticationsCreateS
 export { default as Notifications, NotificationsConfig, } from './components/Notifications/Notifications.svelte';
 export { default as Popover } from './components/Popover/Popover.svelte';
 export { default as Switch, SwitchConfig } from './components/Switch/Switch.svelte';
-export { default as Thc } from './components/Thc/Thc.svelte';
+export { default as Thc, type THC } from './components/Thc/Thc.svelte';
 export { default as X } from './components/X/X.svelte';
 export { focusTrap } from './actions/focus-trap.js';
 export { onOutside } from './actions/on-outside.js';
@@ -29,3 +30,4 @@ export { calculateAlignment } from './utils/calculate-alignment.js';
 export { DevicePointer } from './utils/device-pointer.js';
 export { getId } from './utils/get-id.js';
 export { windowSize, breakpoint } from './utils/window-size.js';
+export type { TW_COLORS } from './utils/tw-types.js';

package/dist/index.js

@@ -13,6 +13,8 @@ export { default as SystemAwareColorScheme } from './components/ColorScheme/Syst
 export { default as LocalColorScheme } from './components/ColorScheme/LocalColorScheme.svelte';
 export { ColorScheme } from './components/ColorScheme/color-scheme.js';
 //
+export { default as DismissibleMessage, DismissibleMessageConfig, } from './components/DismissibleMessage/DismissibleMessage.svelte';
+//
 export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer.svelte';
 //
 export { default as HoverExpandableWidth } from './components/HoverExpandableWidth/HoverExpandableWidth.svelte';

package/dist/utils/tw-types.d.ts

@@ -0,0 +1 @@
+export type TW_COLORS = 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose';

package/dist/utils/tw-types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.46.0",
+	"version": "1.48.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package && node ./scripts/date.js",