@fivem-nui/svelte-components 0.0.0-stage → 1.0.0

package/dist/components/data/NuiBadge.svelte

@@ -0,0 +1,277 @@
+<!--
+  @component NuiBadge
+  Status badge and notification counter component.
+-->
+<script lang="ts">
+  interface Props {
+    /** Text or snippet content rendered inside the badge. */
+    children?: import("svelte").Snippet;
+    /**
+     * Numerical counter value (e.g. notification count).
+     * Negative, non-numeric, or infinite values are normalized to 0.
+     * @defaultValue 0
+     */
+    count?: number;
+    /**
+     * Whether to display the counter when count is 0.
+     * When false (default), a count of 0 falls back to children or a dot indicator.
+     * @defaultValue false
+     */
+    showZero?: boolean;
+    /**
+     * Maximum displayed counter value (e.g. 99 displays as "99+").
+     * @defaultValue 99
+     */
+    maxCount?: number;
+    /**
+     * Color variant.
+     * @defaultValue 'primary'
+     */
+    variant?:
+      | "primary"
+      | "secondary"
+      | "success"
+      | "warning"
+      | "danger"
+      | "info";
+    /**
+     * Size of the badge.
+     * @defaultValue 'md'
+     */
+    size?: "xs" | "sm" | "md" | "lg";
+    /**
+     * Outline style with transparent background and colored border.
+     * @defaultValue false
+     */
+    outline?: boolean;
+    /**
+     * Pill-shaped rounded borders.
+     * @defaultValue true
+     */
+    rounded?: boolean;
+    /**
+     * Visibility of the badge.
+     * @defaultValue true
+     */
+    visible?: boolean;
+    /**
+     * Whether the badge is interactive (automatically true when onclick is provided).
+     * @defaultValue false
+     */
+    clickable?: boolean;
+    /**
+     * Whether the clickable badge is disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Accessible description for screen readers.
+     * Recommended for interactive badges or badges displaying only symbols/numbers.
+     */
+    ariaLabel?: string;
+    /**
+     * Optional role (defaults to "status" when ariaLabel is provided on a non-interactive <span>).
+     */
+    role?: string;
+    /** Click event handler. */
+    onclick?: (event: MouseEvent) => void;
+  }
+
+  let {
+    children,
+    count = 0,
+    showZero = false,
+    maxCount = 99,
+    variant = "primary",
+    size = "md",
+    outline = false,
+    rounded = true,
+    visible = true,
+    clickable = false,
+    disabled = false,
+    ariaLabel,
+    role,
+    onclick,
+  }: Props = $props();
+
+  const normalizedCount = $derived(
+    Number.isFinite(count) ? Math.max(0, Math.floor(count)) : 0,
+  );
+  const normalizedMaxCount = $derived(
+    Number.isFinite(maxCount) ? Math.max(1, Math.floor(maxCount)) : 99,
+  );
+  const showCount = $derived(
+    normalizedCount > 0 || (showZero && count !== undefined),
+  );
+  const displayCount = $derived(
+    normalizedCount > normalizedMaxCount
+      ? `${normalizedMaxCount}+`
+      : normalizedCount,
+  );
+  const isClickable = $derived(clickable || typeof onclick === "function");
+  const resolvedRole = $derived(
+    role ?? (ariaLabel && !isClickable ? "status" : undefined),
+  );
+</script>
+
+{#if visible}
+  {#if isClickable}
+    <button
+      type="button"
+      class="nui-badge nui-badge--{variant} nui-badge--{size} nui-badge--clickable"
+      class:nui-badge--outline={outline}
+      class:nui-badge--rounded={rounded}
+      class:nui-badge--square={!rounded}
+      aria-label={ariaLabel}
+      {disabled}
+      {onclick}
+    >
+      {#if showCount}
+        {displayCount}
+      {:else if children}
+        {@render children()}
+      {:else}
+        <span aria-hidden="true">●</span>
+      {/if}
+    </button>
+  {:else}
+    <span
+      class="nui-badge nui-badge--{variant} nui-badge--{size}"
+      class:nui-badge--outline={outline}
+      class:nui-badge--rounded={rounded}
+      class:nui-badge--square={!rounded}
+      aria-label={ariaLabel}
+      role={resolvedRole}
+    >
+      {#if showCount}
+        {displayCount}
+      {:else if children}
+        {@render children()}
+      {:else}
+        <span aria-hidden="true">●</span>
+      {/if}
+    </span>
+  {/if}
+{/if}
+
+<style>
+  .nui-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font: inherit;
+    font-weight: 600;
+    line-height: 1;
+    text-align: center;
+    border: 1px solid transparent;
+    transition:
+      opacity 0.15s ease,
+      background 0.15s ease,
+      border-color 0.15s ease;
+    box-sizing: border-box;
+    vertical-align: middle;
+  }
+
+  button.nui-badge {
+    appearance: none;
+    -webkit-appearance: none;
+    color: inherit;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  button.nui-badge:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+
+  .nui-badge--clickable {
+    cursor: pointer;
+  }
+
+  .nui-badge--clickable:hover:not(:disabled) {
+    opacity: 0.85;
+  }
+
+  .nui-badge--clickable:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .nui-badge--primary {
+    background: var(--nui-primary, #3b82f6);
+    color: #fff;
+  }
+  .nui-badge--secondary {
+    background: var(--nui-surface-alt, #3f3f46);
+    color: var(--nui-fg, #fafafa);
+  }
+  .nui-badge--success {
+    background: var(--nui-success, #22c55e);
+    color: #fff;
+  }
+  .nui-badge--warning {
+    background: var(--nui-warning, #f59e0b);
+    color: #18181b;
+  }
+  .nui-badge--danger {
+    background: var(--nui-danger, #ef4444);
+    color: #fff;
+  }
+  .nui-badge--info {
+    background: var(--nui-info, #06b6d4);
+    color: #fff;
+  }
+
+  .nui-badge.nui-badge--outline {
+    background: transparent;
+  }
+  .nui-badge.nui-badge--outline.nui-badge--primary {
+    border-color: var(--nui-primary, #3b82f6);
+    color: var(--nui-primary, #3b82f6);
+  }
+  .nui-badge.nui-badge--outline.nui-badge--secondary {
+    border-color: var(--nui-border, #3f3f46);
+    color: var(--nui-fg-secondary, #8b8b99);
+  }
+  .nui-badge.nui-badge--outline.nui-badge--success {
+    border-color: var(--nui-success, #22c55e);
+    color: var(--nui-success, #22c55e);
+  }
+  .nui-badge.nui-badge--outline.nui-badge--warning {
+    border-color: var(--nui-warning, #f59e0b);
+    color: var(--nui-warning, #f59e0b);
+  }
+  .nui-badge.nui-badge--outline.nui-badge--danger {
+    border-color: var(--nui-danger, #ef4444);
+    color: var(--nui-danger, #ef4444);
+  }
+  .nui-badge.nui-badge--outline.nui-badge--info {
+    border-color: var(--nui-info, #06b6d4);
+    color: var(--nui-info, #06b6d4);
+  }
+
+  .nui-badge--xs {
+    padding: 0.125rem 0.35rem;
+    font-size: 0.625rem;
+  }
+  .nui-badge--sm {
+    padding: 0.2rem 0.5rem;
+    font-size: 0.75rem;
+  }
+  .nui-badge--md {
+    padding: 0.3rem 0.65rem;
+    font-size: 0.8125rem;
+  }
+  .nui-badge--lg {
+    padding: 0.4rem 0.85rem;
+    font-size: 0.9375rem;
+  }
+
+  .nui-badge--rounded {
+    border-radius: 9999px;
+  }
+  .nui-badge--square {
+    border-radius: var(--nui-radius, 0.25rem);
+  }
+</style>

package/dist/components/data/NuiBadge.svelte.d.ts

@@ -0,0 +1,74 @@
+interface Props {
+    /** Text or snippet content rendered inside the badge. */
+    children?: import("svelte").Snippet;
+    /**
+     * Numerical counter value (e.g. notification count).
+     * Negative, non-numeric, or infinite values are normalized to 0.
+     * @defaultValue 0
+     */
+    count?: number;
+    /**
+     * Whether to display the counter when count is 0.
+     * When false (default), a count of 0 falls back to children or a dot indicator.
+     * @defaultValue false
+     */
+    showZero?: boolean;
+    /**
+     * Maximum displayed counter value (e.g. 99 displays as "99+").
+     * @defaultValue 99
+     */
+    maxCount?: number;
+    /**
+     * Color variant.
+     * @defaultValue 'primary'
+     */
+    variant?: "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+    /**
+     * Size of the badge.
+     * @defaultValue 'md'
+     */
+    size?: "xs" | "sm" | "md" | "lg";
+    /**
+     * Outline style with transparent background and colored border.
+     * @defaultValue false
+     */
+    outline?: boolean;
+    /**
+     * Pill-shaped rounded borders.
+     * @defaultValue true
+     */
+    rounded?: boolean;
+    /**
+     * Visibility of the badge.
+     * @defaultValue true
+     */
+    visible?: boolean;
+    /**
+     * Whether the badge is interactive (automatically true when onclick is provided).
+     * @defaultValue false
+     */
+    clickable?: boolean;
+    /**
+     * Whether the clickable badge is disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Accessible description for screen readers.
+     * Recommended for interactive badges or badges displaying only symbols/numbers.
+     */
+    ariaLabel?: string;
+    /**
+     * Optional role (defaults to "status" when ariaLabel is provided on a non-interactive <span>).
+     */
+    role?: string;
+    /** Click event handler. */
+    onclick?: (event: MouseEvent) => void;
+}
+/**
+ * NuiBadge
+ * Status badge and notification counter component.
+ */
+declare const NuiBadge: import("svelte").Component<Props, {}, "">;
+type NuiBadge = ReturnType<typeof NuiBadge>;
+export default NuiBadge;

package/dist/components/data/NuiCodeBlock.svelte

@@ -0,0 +1,256 @@
+<!--
+  @component NuiCodeBlock
+  Code snippet block with optional title, language syntax classes, and clipboard copy button.
+-->
+<script module lang="ts">
+  export type NuiCodeLanguage =
+    | 'csharp'
+    | 'javascript'
+    | 'typescript'
+    | 'lua'
+    | 'sql'
+    | 'json'
+    | 'xml'
+    | 'bash'
+    | 'css'
+    | 'markdown'
+    | (string & {});
+</script>
+
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+
+  interface Props {
+    /** Code snippet to display. */
+    code?: string;
+    /**
+     * Programming language for syntax highlighting classes.
+     * Integrates with external highlighters like highlight.js or Prism.
+     * @defaultValue 'csharp'
+     */
+    language?: NuiCodeLanguage;
+    /** Optional title or filename displayed in the header. */
+    title?: string;
+    /**
+     * Whether to show the copy-to-clipboard button.
+     * @defaultValue true
+     */
+    showCopyButton?: boolean;
+    /**
+     * Rounded container borders.
+     * @defaultValue true
+     */
+    rounded?: boolean;
+    /**
+     * Label for copy button in idle state.
+     * @defaultValue 'Copy'
+     */
+    copyLabel?: string;
+    /**
+     * Label for copy button in copied state.
+     * @defaultValue 'Copied!'
+     */
+    copiedLabel?: string;
+    /**
+     * Label for copy button in error state.
+     * @defaultValue 'Failed'
+     */
+    errorLabel?: string;
+    /** Callback executed on successful clipboard copy. */
+    onCopy?: (code: string) => void;
+    /** Callback executed when clipboard copy fails. */
+    onCopyError?: (error: unknown) => void;
+  }
+
+  let {
+    code = '',
+    language = 'csharp',
+    title,
+    showCopyButton = true,
+    rounded = true,
+    copyLabel = 'Copy',
+    copiedLabel = 'Copied!',
+    errorLabel = 'Failed',
+    onCopy,
+    onCopyError
+  }: Props = $props();
+
+  let copying = $state(false);
+  let copied = $state(false);
+  let copyFailed = $state(false);
+  let copyTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  onDestroy(() => {
+    if (copyTimeout !== undefined) {
+      clearTimeout(copyTimeout);
+      copyTimeout = undefined;
+    }
+  });
+
+  async function copyToClipboard() {
+    if (copying) return;
+
+    if (copyTimeout !== undefined) {
+      clearTimeout(copyTimeout);
+      copyTimeout = undefined;
+    }
+
+    copying = true;
+    copied = false;
+    copyFailed = false;
+
+    let writeSuccess = false;
+    let writeError: unknown;
+
+    try {
+      if (typeof navigator === 'undefined' || !navigator.clipboard?.writeText) {
+        throw new Error('Clipboard API not available');
+      }
+      await navigator.clipboard.writeText(code);
+      writeSuccess = true;
+    } catch (e) {
+      writeError = e;
+      console.warn('[fivem-nui-components] Clipboard copy failed:', e);
+    }
+
+    copying = false;
+
+    if (writeSuccess) {
+      copied = true;
+      try {
+        onCopy?.(code);
+      } catch (cbErr) {
+        console.error('[fivem-nui-components] onCopy callback error:', cbErr);
+      }
+    } else {
+      copyFailed = true;
+      try {
+        onCopyError?.(writeError);
+      } catch (cbErr) {
+        console.error('[fivem-nui-components] onCopyError callback error:', cbErr);
+      }
+    }
+
+    copyTimeout = setTimeout(() => {
+      copied = false;
+      copyFailed = false;
+      copyTimeout = undefined;
+    }, 2000);
+  }
+</script>
+
+<div class="nui-code-block" class:nui-code-block--rounded={rounded}>
+  {#if title || showCopyButton}
+    <div class="nui-code-block__header">
+      {#if title}<span class="nui-code-block__title">{title}</span>{/if}
+      {#if showCopyButton}
+        <button
+          type="button"
+          class="nui-code-block__copy"
+          class:nui-code-block__copy--copied={copied}
+          class:nui-code-block__copy--error={copyFailed}
+          disabled={copying}
+          onclick={copyToClipboard}
+          aria-label={copied ? copiedLabel : copyFailed ? errorLabel : copyLabel}
+        >
+          <span aria-live="polite" aria-atomic="true">
+            {copied ? copiedLabel : copyFailed ? errorLabel : copyLabel}
+          </span>
+        </button>
+      {/if}
+    </div>
+  {/if}
+
+  <pre class="nui-code-block__pre"><code class="language-{language}">{code}</code></pre>
+</div>
+
+<style>
+  .nui-code-block {
+    width: 100%;
+    font-family: 'Consolas', 'Monaco', monospace;
+  }
+
+  .nui-code-block__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    background: var(--nui-surface-alt, #101012);
+    border: 1px solid var(--nui-border, #27272a);
+    border-bottom: none;
+  }
+
+  .nui-code-block__title {
+    font-size: 0.8125rem;
+    color: var(--nui-fg-secondary, #8b8b99);
+    font-weight: 500;
+  }
+
+  .nui-code-block__copy {
+    background: transparent;
+    border: 1px solid var(--nui-border, #3f3f46);
+    border-radius: var(--nui-radius, 0.25rem);
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    color: var(--nui-fg, #fafafa);
+    cursor: pointer;
+    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+  }
+
+  .nui-code-block__copy:hover:not(:disabled) {
+    background: var(--nui-hover, rgb(255 255 255 / 0.06));
+  }
+
+  .nui-code-block__copy:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+
+  .nui-code-block__copy:focus-visible {
+    outline: 2px solid var(--nui-primary, #3b82f6);
+    outline-offset: 2px;
+  }
+
+  .nui-code-block__copy--copied {
+    border-color: var(--nui-success, #22c55e);
+    color: var(--nui-success, #22c55e);
+  }
+
+  .nui-code-block__copy--error {
+    border-color: var(--nui-danger, #ef4444);
+    color: var(--nui-danger, #ef4444);
+  }
+
+  .nui-code-block__pre {
+    margin: 0;
+    padding: 1rem;
+    background: var(--nui-surface, #18181b);
+    border: 1px solid var(--nui-border, #27272a);
+    overflow-x: auto;
+    color: var(--nui-fg, #fafafa);
+  }
+
+  .nui-code-block--rounded .nui-code-block__header {
+    border-radius: var(--nui-radius, 0.5rem) var(--nui-radius, 0.5rem) 0 0;
+  }
+
+  .nui-code-block--rounded .nui-code-block__pre {
+    border-radius: var(--nui-radius, 0.5rem);
+  }
+
+  .nui-code-block--rounded .nui-code-block__header + .nui-code-block__pre {
+    border-radius: 0 0 var(--nui-radius, 0.5rem) var(--nui-radius, 0.5rem);
+  }
+
+  .nui-code-block__pre code {
+    font-size: 0.8125rem;
+    line-height: 1.5;
+  }
+
+  /* Scoped syntax highlighting tokens (when external highlighter is applied) */
+  .nui-code-block__pre :global(.string) { color: #facc15; }
+  .nui-code-block__pre :global(.keyword) { color: #60a5fa; font-weight: 600; }
+  .nui-code-block__pre :global(.function) { color: #a7f3d0; }
+  .nui-code-block__pre :global(.comment) { color: #6b7280; opacity: 0.8; font-style: italic; }
+  .nui-code-block__pre :global(.number) { color: #f472b6; }
+</style>

package/dist/components/data/NuiCodeBlock.svelte.d.ts

@@ -0,0 +1,49 @@
+export type NuiCodeLanguage = 'csharp' | 'javascript' | 'typescript' | 'lua' | 'sql' | 'json' | 'xml' | 'bash' | 'css' | 'markdown' | (string & {});
+interface Props {
+    /** Code snippet to display. */
+    code?: string;
+    /**
+     * Programming language for syntax highlighting classes.
+     * Integrates with external highlighters like highlight.js or Prism.
+     * @defaultValue 'csharp'
+     */
+    language?: NuiCodeLanguage;
+    /** Optional title or filename displayed in the header. */
+    title?: string;
+    /**
+     * Whether to show the copy-to-clipboard button.
+     * @defaultValue true
+     */
+    showCopyButton?: boolean;
+    /**
+     * Rounded container borders.
+     * @defaultValue true
+     */
+    rounded?: boolean;
+    /**
+     * Label for copy button in idle state.
+     * @defaultValue 'Copy'
+     */
+    copyLabel?: string;
+    /**
+     * Label for copy button in copied state.
+     * @defaultValue 'Copied!'
+     */
+    copiedLabel?: string;
+    /**
+     * Label for copy button in error state.
+     * @defaultValue 'Failed'
+     */
+    errorLabel?: string;
+    /** Callback executed on successful clipboard copy. */
+    onCopy?: (code: string) => void;
+    /** Callback executed when clipboard copy fails. */
+    onCopyError?: (error: unknown) => void;
+}
+/**
+ * NuiCodeBlock
+ * Code snippet block with optional title, language syntax classes, and clipboard copy button.
+ */
+declare const NuiCodeBlock: import("svelte").Component<Props, {}, "">;
+type NuiCodeBlock = ReturnType<typeof NuiCodeBlock>;
+export default NuiCodeBlock;