@dorsk/tsumikit 0.2.15 → 0.2.16

package/dist/components/molecules/FileButton.svelte

@@ -2,13 +2,14 @@
 	// File-picker button. A real <input type="file"> visually hidden inside a
 	// <label> styled as a button — so it's keyboard-focusable and works with zero
 	// JS to open the dialog. Emits the chosen files via `onfiles`. Dependency-free.
-	import Icon, { isIconName } from '../atoms/Icon.svelte';
+	import Icon from '../atoms/Icon.svelte';
 	import type { IconName } from '../atoms/Icon.svelte';
 
 	let {
 		onfiles,
 		label = 'Choose file',
-		icon = '📎',
+		icon,
+		emoji = '📎',
 		iconOnly = false,
 		accept,
 		multiple = false,
@@ -19,9 +20,12 @@
 	}: {
 		onfiles: (files: File[]) => void;
 		label?: string;
-		/** A registered glyph name (rendered as SVG) or any string such as an
-		 *  emoji (rendered as text). Defaults to the 📎 paperclip emoji. */
-		icon?: IconName | (string & {});
+		/** A registered glyph name (rendered as SVG). Use `emoji` for an
+		 *  off-registry glyph. */
+		icon?: IconName;
+		/** Off-registry glyph such as an emoji, rendered as text as-is. Defaults to
+		 *  the 📎 paperclip emoji; ignored when `icon` is set. */
+		emoji?: string;
 		/** Hide the label visually, showing only the icon. The label is kept for
 		 *  assistive tech (and used as the accessible name). */
 		iconOnly?: boolean;
@@ -61,10 +65,10 @@
 		{disabled}
 		onchange={onchange}
 	/>
-	{#if isIconName(icon)}
+	{#if icon}
 		<Icon name={icon} />
-	{:else}
-		<span class="emoji" aria-hidden="true">{icon}</span>
+	{:else if emoji}
+		<span class="emoji" aria-hidden="true">{emoji}</span>
 	{/if}
 	<span class:sr-only={iconOnly}>{label}</span>
 </label>

package/dist/components/molecules/FileButton.svelte.d.ts

@@ -2,9 +2,12 @@ import type { IconName } from '../atoms/Icon.svelte';
 type $$ComponentProps = {
     onfiles: (files: File[]) => void;
     label?: string;
-    /** A registered glyph name (rendered as SVG) or any string such as an
-     *  emoji (rendered as text). Defaults to the 📎 paperclip emoji. */
-    icon?: IconName | (string & {});
+    /** A registered glyph name (rendered as SVG). Use `emoji` for an
+     *  off-registry glyph. */
+    icon?: IconName;
+    /** Off-registry glyph such as an emoji, rendered as text as-is. Defaults to
+     *  the 📎 paperclip emoji; ignored when `icon` is set. */
+    emoji?: string;
     /** Hide the label visually, showing only the icon. The label is kept for
      *  assistive tech (and used as the accessible name). */
     iconOnly?: boolean;

package/dist/components/molecules/IconButton.svelte

@@ -6,8 +6,11 @@
 	import type { IconName } from '../atoms/Icon.svelte';
 
 	type IconButtonProps = HTMLButtonAttributes & {
-		/** Named glyph from the registry. Omit when supplying `children`. */
+		/** Named glyph from the registry (rendered as SVG). */
 		icon?: IconName;
+		/** Off-registry glyph such as an emoji, rendered as text as-is. Use instead
+		 *  of `icon` when the glyph isn't in the registry. */
+		emoji?: string;
 		/** Raw SVG markup (24×24 viewBox) — overrides `icon`. Pass a
 		 *  lucide-svelte component's contents to render any off-registry icon. */
 		children?: Snippet;
@@ -32,6 +35,7 @@
 
 	let {
 		icon,
+		emoji,
 		children,
 		label,
 		title = label,
@@ -50,7 +54,7 @@
 </script>
 
 <!-- Composition: the icon-only button is a Button (canonical control styling)
-     in its icon variant, wrapping an Icon. -->
+     in its icon variant, wrapping an Icon (or a text emoji glyph). -->
 <Button
 	{...rest}
 	{variant}
@@ -68,7 +72,21 @@
 >
 	{#if children}
 		<Icon {size}>{@render children()}</Icon>
-	{:else}
+	{:else if emoji}
+		<span class="emoji" style="font-size: {size * 1.35}px" aria-hidden="true">{emoji}</span>
+	{:else if icon}
 		<Icon name={icon} {size} />
 	{/if}
 </Button>
+
+<style>
+	/* Off-registry glyph (emoji) rendered as text rather than an SVG. Sized off the
+	   `size` prop (×1.35, since an emoji reads small next to an SVG glyph of the
+	   same px) and centered so it shares the button's tap target. */
+	.emoji {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 1;
+	}
+</style>

package/dist/components/molecules/IconButton.svelte.d.ts

@@ -2,8 +2,11 @@ import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { IconName } from '../atoms/Icon.svelte';
 type IconButtonProps = HTMLButtonAttributes & {
-    /** Named glyph from the registry. Omit when supplying `children`. */
+    /** Named glyph from the registry (rendered as SVG). */
     icon?: IconName;
+    /** Off-registry glyph such as an emoji, rendered as text as-is. Use instead
+     *  of `icon` when the glyph isn't in the registry. */
+    emoji?: string;
     /** Raw SVG markup (24×24 viewBox) — overrides `icon`. Pass a
      *  lucide-svelte component's contents to render any off-registry icon. */
     children?: Snippet;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",