@hyvnt/hyvui 0.2.0 → 0.3.0

package/dist/components/primitives/Icon.svelte

@@ -1,49 +1,44 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Icon size in pixels. */
-    size?: number;
-    /** CSS color value for the icon. */
-    color?: string;
-    /** Additional CSS classes. */
-    class?: string;
-    /** SVG content to render inside the icon wrapper. */
-    children?: Snippet;
-  }
-
-  let {
-    size = 16,
-    color = 'currentColor',
-    class: className = '',
-    children,
-  }: Props = $props();
-</script>
-
-<span
-  class={cn('hyvui-icon', className)}
-  style:width="{size}px"
-  style:height="{size}px"
-  style:color={color}
-  aria-hidden="true"
->
-  {#if children}{@render children()}{/if}
-</span>
-
-<style>
-  .hyvui-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    line-height: 0;
-  }
-
-  .hyvui-icon :global(svg) {
-    width: 100%;
-    height: 100%;
-    fill: none;
-    stroke: currentColor;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Icon size in pixels. */
+		size?: number;
+		/** CSS color value for the icon. */
+		color?: string;
+		/** Additional CSS classes. */
+		class?: string;
+		/** SVG content to render inside the icon wrapper. */
+		children?: Snippet;
+	}
+
+	let { size = 16, color = 'currentColor', class: className = '', children }: Props = $props();
+</script>
+
+<span
+	class={cn('hyvui-icon', className)}
+	style:width="{size}px"
+	style:height="{size}px"
+	style:color
+	aria-hidden="true"
+>
+	{#if children}{@render children()}{/if}
+</span>
+
+<style>
+	.hyvui-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		line-height: 0;
+	}
+
+	.hyvui-icon :global(svg) {
+		width: 100%;
+		height: 100%;
+		fill: none;
+		stroke: currentColor;
+	}
+</style>

package/dist/components/primitives/Label.svelte

@@ -1,44 +1,39 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** HTML tag to render. */
-    as?: string;
-    /** Label color token. */
-    color?: 'muted' | 'accent' | 'signal';
-    /** Additional CSS classes. */
-    class?: string;
-    /** Label text content. */
-    children?: Snippet;
-  }
-
-  let {
-    as = 'span',
-    color = 'muted',
-    class: className = '',
-    children,
-  }: Props = $props();
-
-  const colorMap: Record<string, string> = {
-    muted: 'var(--muted-strong)',
-    accent: 'var(--accent)',
-    signal: 'var(--signal)',
-  };
-</script>
-
-<svelte:element this={as} class={cn('hyvui-label', className)} style:color={colorMap[color]}>
-  {#if children}{@render children()}{/if}
-</svelte:element>
-
-<style>
-  .hyvui-label {
-    font-family: var(--font-mono);
-    font-size: 0.7rem;
-    font-weight: 400;
-    letter-spacing: 0.16em;
-    text-transform: uppercase;
-    line-height: 1.2;
-    white-space: nowrap;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** HTML tag to render. */
+		as?: string;
+		/** Label color token. */
+		color?: 'muted' | 'accent' | 'signal';
+		/** Additional CSS classes. */
+		class?: string;
+		/** Label text content. */
+		children?: Snippet;
+	}
+
+	let { as = 'span', color = 'muted', class: className = '', children }: Props = $props();
+
+	const colorMap: Record<string, string> = {
+		muted: 'var(--muted-strong)',
+		accent: 'var(--accent)',
+		signal: 'var(--signal)'
+	};
+</script>
+
+<svelte:element this={as} class={cn('hyvui-label', className)} style:color={colorMap[color]}>
+	{#if children}{@render children()}{/if}
+</svelte:element>
+
+<style>
+	.hyvui-label {
+		font-family: var(--font-mono);
+		font-size: 0.7rem;
+		font-weight: 400;
+		letter-spacing: 0.16em;
+		text-transform: uppercase;
+		line-height: 1.2;
+		white-space: nowrap;
+	}
+</style>

package/dist/components/primitives/Surface.svelte

@@ -1,87 +1,89 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Surface visual style. */
-    variant?: 'base' | 'card' | 'panel';
-    /** HTML tag to render. */
-    as?: string;
-    /** Adds a pseudoelement teal inset border on panel variant. */
-    withInset?: boolean;
-    /** Additional CSS classes. */
-    class?: string;
-    /** Surface content. */
-    children?: Snippet;
-  }
-
-  let {
-    variant = 'base',
-    as = 'div',
-    withInset = false,
-    class: className = '',
-    children,
-  }: Props = $props();
-</script>
-
-<svelte:element
-  this={as}
-  class={cn(
-    'hyvui-surface',
-    variant === 'card' && 'hyvui-surface-card',
-    variant === 'panel' && 'hyvui-surface-panel',
-    variant === 'base' && 'hyvui-surface-base',
-    withInset && 'hyvui-surface-inset',
-    className
-  )}
->
-  {#if children}{@render children()}{/if}
-</svelte:element>
-
-<style>
-  .hyvui-surface {
-    position: relative;
-    overflow: clip;
-    border-radius: var(--radius-md);
-    isolation: isolate;
-  }
-
-  .hyvui-surface::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    background:
-      linear-gradient(180deg, rgba(240, 232, 218, 0.04), transparent 20%),
-      linear-gradient(90deg, rgba(121, 166, 163, 0.03), transparent 30%);
-    opacity: 0.8;
-  }
-
-  .hyvui-surface-base {
-    background: var(--surface-soft);
-    border: 1px solid var(--line);
-    box-shadow: var(--surface-stroke);
-  }
-
-  .hyvui-surface-card {
-    background: var(--surface-card);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    box-shadow: var(--surface-stroke), var(--shadow-card);
-    backdrop-filter: blur(8px);
-  }
-
-  .hyvui-surface-panel {
-    background: var(--surface-panel);
-    border: 1px solid var(--line);
-    box-shadow: var(--surface-stroke), var(--shadow-veil);
-    backdrop-filter: blur(10px);
-  }
-
-  .hyvui-surface-inset::after {
-    content: '';
-    position: absolute;
-    inset: 0.9rem;
-    border: 1px solid rgba(121, 166, 163, 0.14);
-    pointer-events: none;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Surface visual style. */
+		variant?: 'base' | 'card' | 'panel';
+		/** HTML tag to render. */
+		as?: string;
+		/** Adds a pseudoelement teal inset border on panel variant. */
+		withInset?: boolean;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Surface content. */
+		children?: Snippet;
+	}
+
+	let {
+		variant = 'base',
+		as = 'div',
+		withInset = false,
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+<svelte:element
+	this={as}
+	class={cn(
+		'hyvui-surface',
+		variant === 'card' && 'hyvui-surface-card',
+		variant === 'panel' && 'hyvui-surface-panel',
+		variant === 'base' && 'hyvui-surface-base',
+		withInset && 'hyvui-surface-inset',
+		className
+	)}
+>
+	{#if children}{@render children()}{/if}
+</svelte:element>
+
+<style>
+	.hyvui-surface {
+		position: relative;
+		overflow: clip;
+		border-radius: var(--radius-md);
+		isolation: isolate;
+		max-inline-size: 100%;
+		min-width: 0;
+	}
+
+	.hyvui-surface::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		background:
+			linear-gradient(180deg, rgba(240, 232, 218, 0.04), transparent 20%),
+			linear-gradient(90deg, rgba(121, 166, 163, 0.03), transparent 30%);
+		opacity: 0.8;
+	}
+
+	.hyvui-surface-base {
+		background: var(--surface-soft);
+		border: 1px solid var(--line);
+		box-shadow: var(--surface-stroke);
+	}
+
+	.hyvui-surface-card {
+		background: var(--surface-card);
+		border: 1px solid rgba(255, 255, 255, 0.05);
+		box-shadow: var(--surface-stroke), var(--shadow-card);
+		backdrop-filter: blur(8px);
+	}
+
+	.hyvui-surface-panel {
+		background: var(--surface-panel);
+		border: 1px solid var(--line);
+		box-shadow: var(--surface-stroke), var(--shadow-veil);
+		backdrop-filter: blur(10px);
+	}
+
+	.hyvui-surface-inset::after {
+		content: '';
+		position: absolute;
+		inset: 0.9rem;
+		border: 1px solid rgba(121, 166, 163, 0.14);
+		pointer-events: none;
+	}
+</style>

package/dist/components/primitives/Text.svelte

@@ -1,98 +1,98 @@
-<script lang="ts">
-  import { cn } from '../../utils/cn.js';
-  import type { Snippet } from 'svelte';
-  import type { Expression } from './text.js';
-
-  interface Props {
-    /** HTML tag to render. */
-    as?: string;
-    /** Typographic style variant. */
-    variant?: 'heading' | 'body' | 'caption' | 'italic';
-    /** Text color token. */
-    color?: 'primary' | 'soft' | 'muted' | 'muted-strong' | 'accent' | 'signal';
-    /** Compositional intent expression. Applied alongside the variant. */
-    expression?: Expression;
-    /** Additional CSS classes. */
-    class?: string;
-    /** Text content. */
-    children?: Snippet;
-  }
-
-  let {
-    as = 'p',
-    variant = 'body',
-    color = variant === 'heading' ? 'primary' : 'soft',
-    expression,
-    class: className = '',
-    children,
-  }: Props = $props();
-
-  const colorMap: Record<string, string> = {
-    primary: 'var(--text)',
-    soft: 'var(--text-soft)',
-    muted: 'var(--muted)',
-    'muted-strong': 'var(--muted-strong)',
-    accent: 'var(--accent)',
-    signal: 'var(--signal)',
-  };
-
-  const variantClass = $derived(
-    cn(
-      variant === 'heading' && 'hyvui-text-heading',
-      variant === 'body' && 'hyvui-text-body',
-      variant === 'caption' && 'hyvui-text-caption',
-      variant === 'italic' && 'hyvui-text-italic',
-      expression && `expr-${expression}`,
-      className
-    )
-  );
-</script>
-
-<svelte:element this={as} class={variantClass} style:color={colorMap[color]}>
-  {#if children}{@render children()}{/if}
-</svelte:element>
-
-<style>
-  .hyvui-text-heading,
-  .hyvui-text-body,
-  .hyvui-text-caption,
-  .hyvui-text-italic {
-    margin: 0;
-  }
-
-  .hyvui-text-heading {
-    font-family: var(--font-body);
-    font-size: clamp(1.75rem, 4vw, 3.25rem);
-    font-weight: 400;
-    line-height: 0.95;
-    letter-spacing: -0.045em;
-    text-wrap: balance;
-  }
-
-  .hyvui-text-body {
-    font-family: var(--font-body);
-    font-size: 1.03rem;
-    font-weight: 400;
-    line-height: 1.62;
-    max-width: 32rem;
-    text-wrap: pretty;
-  }
-
-  .hyvui-text-caption {
-    font-family: var(--font-mono);
-    font-size: 0.7rem;
-    font-weight: 400;
-    letter-spacing: 0.16em;
-    text-transform: uppercase;
-    line-height: 1.2;
-  }
-
-  .hyvui-text-italic {
-    font-family: var(--font-body);
-    font-size: 1.02rem;
-    font-style: italic;
-    font-weight: 400;
-    line-height: 1.64;
-    text-wrap: pretty;
-  }
-</style>
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { Snippet } from 'svelte';
+	import type { Expression } from './text.js';
+
+	interface Props {
+		/** HTML tag to render. */
+		as?: string;
+		/** Typographic style variant. */
+		variant?: 'heading' | 'body' | 'caption' | 'italic';
+		/** Text color token. */
+		color?: 'primary' | 'soft' | 'muted' | 'muted-strong' | 'accent' | 'signal';
+		/** Compositional intent expression. Applied alongside the variant. */
+		expression?: Expression;
+		/** Additional CSS classes. */
+		class?: string;
+		/** Text content. */
+		children?: Snippet;
+	}
+
+	let {
+		as = 'p',
+		variant = 'body',
+		color = variant === 'heading' ? 'primary' : 'soft',
+		expression,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	const colorMap: Record<string, string> = {
+		primary: 'var(--text)',
+		soft: 'var(--text-soft)',
+		muted: 'var(--muted)',
+		'muted-strong': 'var(--muted-strong)',
+		accent: 'var(--accent)',
+		signal: 'var(--signal)'
+	};
+
+	const variantClass = $derived(
+		cn(
+			variant === 'heading' && 'hyvui-text-heading',
+			variant === 'body' && 'hyvui-text-body',
+			variant === 'caption' && 'hyvui-text-caption',
+			variant === 'italic' && 'hyvui-text-italic',
+			expression && `expr-${expression}`,
+			className
+		)
+	);
+</script>
+
+<svelte:element this={as} class={variantClass} style:color={colorMap[color]}>
+	{#if children}{@render children()}{/if}
+</svelte:element>
+
+<style>
+	.hyvui-text-heading,
+	.hyvui-text-body,
+	.hyvui-text-caption,
+	.hyvui-text-italic {
+		margin: 0;
+	}
+
+	.hyvui-text-heading {
+		font-family: var(--font-body);
+		font-size: clamp(1.75rem, 4vw, 3.25rem);
+		font-weight: 400;
+		line-height: 0.95;
+		letter-spacing: -0.045em;
+		text-wrap: balance;
+	}
+
+	.hyvui-text-body {
+		font-family: var(--font-body);
+		font-size: 1.03rem;
+		font-weight: 400;
+		line-height: 1.62;
+		max-width: 32rem;
+		text-wrap: pretty;
+	}
+
+	.hyvui-text-caption {
+		font-family: var(--font-mono);
+		font-size: 0.7rem;
+		font-weight: 400;
+		letter-spacing: 0.16em;
+		text-transform: uppercase;
+		line-height: 1.2;
+	}
+
+	.hyvui-text-italic {
+		font-family: var(--font-body);
+		font-size: 1.02rem;
+		font-style: italic;
+		font-weight: 400;
+		line-height: 1.64;
+		text-wrap: pretty;
+	}
+</style>