@noahbaumgartner/svelte-ui 0.0.4 → 0.0.6

package/dist/internal/icons/Ellipsis.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon
+	{...props}
+	nodes={[
+		['circle', { cx: '12', cy: '12', r: '1' }],
+		['circle', { cx: '19', cy: '12', r: '1' }],
+		['circle', { cx: '5', cy: '12', r: '1' }]
+	]}
+/>

package/dist/internal/icons/Ellipsis.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const Ellipsis: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type Ellipsis = ReturnType<typeof Ellipsis>;
+export default Ellipsis;

package/dist/internal/icons/Icon.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	/*
+	 * Renders the small glyphs the components draw themselves (checkmarks,
+	 * chevrons, …) so the library needs no icon package. The paths are taken
+	 * from Lucide (https://lucide.dev), ISC License; portions Feather, MIT
+	 * License, Copyright (c) 2013-2022 Cole Bemis. Icons passed in through an
+	 * `icon` prop come from the consumer's own icon library, not from here.
+	 */
+	import type { SVGAttributes } from 'svelte/elements';
+
+	type GlyphNode = [tag: string, attrs: Record<string, string | number>];
+
+	type Props = SVGAttributes<SVGSVGElement> & { nodes: GlyphNode[] };
+
+	let { nodes, ...rest }: Props = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	{...rest}
+>
+	{#each nodes as [tag, attrs], i (i)}
+		<svelte:element this={tag} {...attrs} />
+	{/each}
+</svg>

package/dist/internal/icons/Icon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SVGAttributes } from 'svelte/elements';
+type GlyphNode = [tag: string, attrs: Record<string, string | number>];
+type Props = SVGAttributes<SVGSVGElement> & {
+    nodes: GlyphNode[];
+};
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/internal/icons/Minus.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon {...props} nodes={[['path', { d: 'M5 12h14' }]]} />

package/dist/internal/icons/Minus.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const Minus: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type Minus = ReturnType<typeof Minus>;
+export default Minus;

package/dist/internal/icons/PanelLeft.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon
+	{...props}
+	nodes={[
+		['rect', { width: '18', height: '18', x: '3', y: '3', rx: '2' }],
+		['path', { d: 'M9 3v18' }]
+	]}
+/>

package/dist/internal/icons/PanelLeft.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const PanelLeft: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type PanelLeft = ReturnType<typeof PanelLeft>;
+export default PanelLeft;

package/dist/internal/icons/Plus.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon
+	{...props}
+	nodes={[
+		['path', { d: 'M5 12h14' }],
+		['path', { d: 'M12 5v14' }]
+	]}
+/>

package/dist/internal/icons/Plus.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const Plus: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type Plus = ReturnType<typeof Plus>;
+export default Plus;

package/dist/internal/icons/User.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon
+	{...props}
+	nodes={[
+		['path', { d: 'M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2' }],
+		['circle', { cx: '12', cy: '7', r: '4' }]
+	]}
+/>

package/dist/internal/icons/User.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const User: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type User = ReturnType<typeof User>;
+export default User;

package/dist/internal/icons/X.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon
+	{...props}
+	nodes={[
+		['path', { d: 'M18 6 6 18' }],
+		['path', { d: 'm6 6 12 12' }]
+	]}
+/>

package/dist/internal/icons/X.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const X: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type X = ReturnType<typeof X>;
+export default X;

package/dist/styles/tokens.css

@@ -1,50 +1,48 @@
-:root
-{
-	color-scheme: light;
-	--base: #fff;
-	--ink: #000;
+@layer svelte-ui {
+	:root {
+		color-scheme: light;
+		--ui-base: #fff;
+		--ui-ink: #000;
 
-	--color-bg: var(--base);
-	--color-surface: color-mix(in srgb, var(--base), var(--ink) 6%);
-	--color-border: color-mix(in srgb, var(--base), var(--ink) 10%);
-	--color-border-strong: color-mix(in srgb, var(--base), var(--ink) 17%);
-	--color-text-faint: color-mix(in srgb, var(--base), var(--ink) 36%);
-	--color-text-muted: color-mix(in srgb, var(--base), var(--ink) 55%);
-	--color-text-secondary: color-mix(in srgb, var(--base), var(--ink) 75%);
-	--color-emphasis: color-mix(in srgb, var(--base), var(--ink) 85%);
-	--color-text: var(--ink);
-	--color-ink: var(--ink);
-	--color-base: var(--base);
+		--color-bg: var(--ui-base);
+		--color-surface: color-mix(in srgb, var(--ui-base), var(--ui-ink) 6%);
+		--color-border: color-mix(in srgb, var(--ui-base), var(--ui-ink) 10%);
+		--color-border-strong: color-mix(in srgb, var(--ui-base), var(--ui-ink) 17%);
+		--color-text-faint: color-mix(in srgb, var(--ui-base), var(--ui-ink) 36%);
+		--color-text-muted: color-mix(in srgb, var(--ui-base), var(--ui-ink) 55%);
+		--color-text-secondary: color-mix(in srgb, var(--ui-base), var(--ui-ink) 75%);
+		--color-emphasis: color-mix(in srgb, var(--ui-base), var(--ui-ink) 85%);
+		--color-text: var(--ui-ink);
+		--color-ink: var(--ui-ink);
+		--color-base: var(--ui-base);
 
-	/* Hover states */
-	--color-surface-hover: color-mix(in srgb, var(--base), var(--ink) 12%);
-	--color-surface-active: color-mix(in srgb, var(--base), var(--ink) 17%);
-	--color-ink-hover: color-mix(in srgb, var(--base), var(--ink) 80%);
+		/* Hover states */
+		--color-surface-hover: color-mix(in srgb, var(--ui-base), var(--ui-ink) 12%);
+		--color-surface-active: color-mix(in srgb, var(--ui-base), var(--ui-ink) 17%);
+		--color-ink-hover: color-mix(in srgb, var(--ui-base), var(--ui-ink) 80%);
 
-	/* Accent */
-	--color-accent: var(--accent, var(--ink));
-	--color-accent-hover: color-mix(in srgb, var(--base), var(--color-accent) 80%);
-	--color-accent-foreground: oklch(from var(--color-accent) clamp(0, (0.65 - l) * 1000, 1) 0 0);
+		/* Accent */
+		--color-accent: var(--ui-accent, var(--ui-ink));
+		--color-accent-hover: color-mix(in srgb, var(--ui-base), var(--color-accent) 80%);
+		--color-accent-foreground: oklch(from var(--color-accent) clamp(0, (0.65 - l) * 1000, 1) 0 0);
 
-	/* Validation errors; the only non-gray color */
-	--color-destructive: #dc2626;
-}
+		/* Validation errors; the only non-gray color */
+		--color-destructive: #dc2626;
+	}
 
-@media (prefers-color-scheme: dark)
-{
-	:root:not([data-theme='light'])
-	{
-		--base: #0a0a0a;
-		--ink: #fff;
+	@media (prefers-color-scheme: dark) {
+		:root:not([data-theme='light']) {
+			--ui-base: #0a0a0a;
+			--ui-ink: #fff;
+			color-scheme: dark;
+			--color-destructive: #f87171;
+		}
+	}
+
+	:root[data-theme='dark'] {
+		--ui-base: #0a0a0a;
+		--ui-ink: #fff;
 		color-scheme: dark;
 		--color-destructive: #f87171;
 	}
 }
-
-:root[data-theme='dark']
-{
-	--base: #0a0a0a;
-	--ink: #fff;
-	color-scheme: dark;
-	--color-destructive: #f87171;
-}

package/package.json

@@ -1,6 +1,8 @@
 {
 	"name": "@noahbaumgartner/svelte-ui",
-	"version": "0.0.4",
+	"version": "0.0.6",
+	"license": "MIT",
+	"author": "Noah Baumgartner",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/noahbaumgartner/svelte-ui.git"
@@ -37,11 +39,6 @@
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
 		},
-		"./icons": {
-			"types": "./dist/icons.d.ts",
-			"svelte": "./dist/icons.js",
-			"default": "./dist/icons.js"
-		},
 		"./tokens.css": "./dist/styles/tokens.css"
 	},
 	"peerDependencies": {
@@ -49,6 +46,7 @@
 	},
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",
+		"@lucide/svelte": "^1.47.0",
 		"@storybook/addon-a11y": "^10.6.0",
 		"@storybook/addon-docs": "^10.6.0",
 		"@storybook/addon-svelte-csf": "latest",
@@ -81,8 +79,5 @@
 	},
 	"keywords": [
 		"svelte"
-	],
-	"dependencies": {
-		"@lucide/svelte": "^1.47.0"
-	}
+	]
 }

package/dist/icons.d.ts

@@ -1,2 +0,0 @@
-export * from '@lucide/svelte';
-export type { LucideIcon, LucideProps } from '@lucide/svelte';

package/dist/icons.js

@@ -1,4 +0,0 @@
-// Lucide icons, re-exported under `svelte-ui/icons` so consumers don't need
-// their own @lucide/svelte install. Kept off the root entry because icon names
-// (Link, Tag, Image, …) would collide with component names.
-export * from '@lucide/svelte';