svelte-comp 1.1.5 → 1.2.2

package/dist/lib/CodeView.svelte

@@ -30,6 +30,9 @@
    * @options xs|sm|md|lg|xl
    * @default md
    *
+   * @prop class {string} - Extra classes applied to the root container
+   * @default ""
+   * 
    * @note Uses Prism for syntax highlighting; HTML/CSS/TXT grammars are bundled by default.
    * @note Editable mode renders a transparent textarea above a highlighted code layer, mirroring real editors.
    * @note Cursor-line highlight is overlaid using CSS variables and scroll-position tracking.
@@ -59,6 +62,7 @@
     editable?: boolean;
     activeLine?: boolean;
     sz?: SizeKey;
+    class?: string;
   };
 
   let {
@@ -70,6 +74,7 @@
     editable = false,
     activeLine = false,
     sz = "md",
+    class: externalClass = "",
   }: Props = $props();
 
   let textareaEl = $state<HTMLTextAreaElement | null>(null);
@@ -141,11 +146,12 @@
 </script>
 
 <div
-  class={cx(
-    "w-full border border-[var(--border-color-default)] bg-[var(--color-bg-surface)]",
-    "text-[var(--color-text-default)]"
-  )}
->
+  class={cx(
+    "cv-root w-full h-full min-h-0 flex flex-col border border-[var(--border-color-default)] bg-[var(--color-bg-surface)]",
+    "text-[var(--color-text-default)]",
+    externalClass
+  )}
+>
   {#if title}
     <div
       class={cx(
@@ -170,23 +176,29 @@
     </div>
   {/if}
 
-  <div class={cx("flex font-mono", TEXT[sz], LINE_HEIGHT[sz])}>
-    {#if showLineNumbers}
-      <div
-        bind:this={gutterEl}
-        class={cx(
-          "select-none px-3 py-[12px] border-r border-[var(--border-color-default)]",
-          "text-[var(--color-text-muted)] text-right overflow-hidden",
-          "bg-[var(--color-bg-surface)] tabular-nums min-h-[180px] max-h-[480px]"
-        )}
-      >
-        {#each lines as _, i (i)}
-          <div class={LINE_HEIGHT[sz]}>{i + 1}</div>
-        {/each}
-      </div>
-    {/if}
-
-    <div class="relative flex-1 min-h-[180px] max-h-[480px]">
+  <div
+    class={cx(
+      "cv-body flex flex-1 min-h-0 font-mono",
+      TEXT[sz],
+      LINE_HEIGHT[sz]
+    )}
+  >
+    {#if showLineNumbers}
+      <div
+        bind:this={gutterEl}
+        class={cx(
+          "select-none px-3 py-[12px] border-r border-[var(--border-color-default)]",
+          "text-[var(--color-text-muted)] text-right overflow-hidden",
+          "cv-gutter bg-[var(--color-bg-surface)] tabular-nums h-full min-h-0"
+        )}
+      >
+        {#each lines as _, i (i)}
+          <div class={LINE_HEIGHT[sz]}>{i + 1}</div>
+        {/each}
+      </div>
+    {/if}
+
+    <div class="cv-editor relative flex-1 min-h-0">
       <div
         bind:this={highlightEl}
         class={cx("cv-highlight cv-layer", TEXT[sz], LINE_HEIGHT[sz])}

package/dist/lib/CodeView.svelte.d.ts

@@ -28,6 +28,9 @@
    * @options xs|sm|md|lg|xl
    * @default md
    *
+   * @prop class {string} - Extra classes applied to the root container
+   * @default ""
+   *
    * @note Uses Prism for syntax highlighting; HTML/CSS/TXT grammars are bundled by default.
    * @note Editable mode renders a transparent textarea above a highlighted code layer, mirroring real editors.
    * @note Cursor-line highlight is overlaid using CSS variables and scroll-position tracking.
@@ -54,6 +57,7 @@ type Props = {
     editable?: boolean;
     activeLine?: boolean;
     sz?: SizeKey;
+    class?: string;
 };
 declare const CodeView: import("svelte").Component<Props, {}, "code">;
 type CodeView = ReturnType<typeof CodeView>;

package/dist/lib/Dialog.svelte

@@ -100,7 +100,7 @@
   }
 
   const panelBase =
-    "bg-[var(--color-bg-surface)] rounded-[var(--radius-lg)] shadow-lg min-w-80 max-w-md w-full border border-[var(--border-color-default)]";
+    "fusion-dialog bg-[var(--color-bg-surface)] rounded-[var(--radius-lg)] shadow-lg min-w-80 max-w-md w-full border border-[var(--border-color-default)]";
 
   const paddingBySize: Record<SizeKey, string> = {
     xs: "p-[var(--spacing-sm)]",
@@ -224,3 +224,12 @@
     </div>
   {/if}
 {/if}
+<style>
+  :global(.fusion-dialog h3) {
+    color: var(--color-text-default);
+  }
+
+  :global(.fusion-dialog p) {
+    color: var(--color-text-muted);
+  }
+</style>

package/dist/lib/SearchInput.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  /**
+   * @component SearchInput
+   * @description Search input field with a leading search icon.
+   *
+   * @prop label {string} - Label text rendered above the field
+   *
+   * @prop placeholder {string} - Placeholder text
+   * @default "Search"
+   *
+   * @prop value {string} - Controlled field value (bindable)
+   * @default ""
+   *
+   * @prop sz {SizeKey} - Size preset for spacing and typography
+   * @options xs|sm|md|lg|xl
+   * @default sm
+   *
+   * @prop variant {FieldVariant} - Visual style variant
+   * @options default|filled|neutral
+   * @default filled
+   *
+   * @prop class {string} - Additional classes applied to the Field root
+   * @default ""
+   *
+   * @note Renders a leading search icon and uses `Field` with `type="search"` and `clearable`.
+   */
+  import Field from "./Field.svelte";
+
+  type Props = {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    sz?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    variant?: 'default' | 'filled' | 'neutral';
+    class?: string;
+    [key: string]: unknown;
+  };
+
+  let {
+    label,
+    placeholder = 'Search',
+    value = $bindable(''),
+    sz = 'sm',
+    variant = 'filled',
+    class: externalClass = '',
+    ...rest
+  }: Props = $props();
+</script>
+
+{#snippet leading()}
+  <span class="ml-1 inline-flex h-6 w-6 items-center justify-center text-[var(--color-text-muted)]">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-search-icon lucide-search"
+    >
+      <path d="m21 21-4.34-4.34" />
+      <circle cx="11" cy="11" r="8" />
+    </svg>
+  </span>
+{/snippet}
+
+<Field
+  {label}
+  bind:value
+  {sz}
+  {variant}
+  type="search"
+  clearable={true}
+  {leading}
+  {placeholder}
+  class={`search-input w-full max-w-[520px] [&_input]:pl-10 ${externalClass}`}
+  {...rest}
+/>
+
+<style>
+  :global(.search-input input[type="search"]) {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  :global(.search-input input[type="search"]::-webkit-search-cancel-button),
+  :global(.search-input input[type="search"]::-webkit-search-decoration),
+  :global(.search-input input[type="search"]::-webkit-search-results-button),
+  :global(.search-input input[type="search"]::-webkit-search-results-decoration) {
+    -webkit-appearance: none;
+    appearance: none;
+    display: none;
+  }
+</style>

package/dist/lib/SearchInput.svelte.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    sz?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    variant?: 'default' | 'filled' | 'neutral';
+    class?: string;
+    [key: string]: unknown;
+};
+declare const SearchInput: import("svelte").Component<Props, {}, "value">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;

package/dist/lib/Table.svelte

@@ -171,6 +171,13 @@
   const alignTd = (a?: CellAlign) =>
     a === "end" ? "text-right" : a === "start" ? "text-left" : "text-center";
 
+  const alignTh = (a?: CellAlign) =>
+    a === "end"
+      ? "justify-end"
+      : a === "center"
+        ? "justify-center"
+        : "justify-start";
+
   const wrapperClass = $derived(cx("overflow-x-auto", externalClass));
   const tableTextSize = $derived(TEXT[sz]);
   const currentVariant = $derived(variant);
@@ -225,7 +232,10 @@
             >
               <button
                 type="button"
-                class="flex items-center gap-2 select-none hover:bg-[var(--color-bg-hover)] rounded-none px-1 py-0.5 border border-transparent focus-visible:border-[var(--border-color-focus)] focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] focus-visible:outline-none"
+                class={cx(
+                  "flex w-full items-center gap-2 select-none hover:bg-[var(--color-bg-hover)] rounded-none px-1 py-0.5 border border-transparent focus-visible:border-[var(--border-color-focus)] focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] focus-visible:outline-none",
+                  alignTh(col.align)
+                )}
                 onclick={() => toggleSort(col)}
                 onkeydown={(e) => {
                   if (e.key === "Enter" || e.key === " ") {
@@ -235,7 +245,9 @@
                 }}
                 aria-label={`Sort by ${col.label}`}
               >
-                <span class="truncate min-w-0 text-left">{col.label}</span>
+                <span class={cx("truncate min-w-0", alignTd(col.align))}>
+                  {col.label}
+                </span>
                 <svg
                   class={cx(
                     "h-4 w-4 opacity-60 transition-transform",

package/dist/lib/index.d.ts

@@ -18,6 +18,7 @@ export { default as PrimaryColorSelect } from "./PrimaryColorSelect.svelte";
 export { default as ProgressBar } from "./ProgressBar.svelte";
 export { default as ProgressCircle } from "./ProgressCircle.svelte";
 export { default as Radio } from "./Radio.svelte";
+export { default as SearchInput } from "./SearchInput.svelte";
 export { default as Select } from "./Select.svelte";
 export { default as Slider } from "./Slider.svelte";
 export { default as Splitter } from "./Splitter.svelte";

package/dist/lib/index.js

@@ -19,6 +19,7 @@ export { default as PrimaryColorSelect } from "./PrimaryColorSelect.svelte";
 export { default as ProgressBar } from "./ProgressBar.svelte";
 export { default as ProgressCircle } from "./ProgressCircle.svelte";
 export { default as Radio } from "./Radio.svelte";
+export { default as SearchInput } from "./SearchInput.svelte";
 export { default as Select } from "./Select.svelte";
 export { default as Slider } from "./Slider.svelte";
 export { default as Splitter } from "./Splitter.svelte";

package/package.json

@@ -1,4 +1,7 @@
 {
+  "name": "svelte-comp",
+  "version": "1.2.2",
+  "license": "MIT",
   "description": "A comprehensive component library built on Svelte 5 (runes) with design tokens (tailwind), accessibility focus, and TypeScript support",
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",
@@ -34,8 +37,6 @@
     "tailwind",
     "ui-library"
   ],
-  "license": "MIT",
-  "name": "svelte-comp",
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
@@ -46,6 +47,5 @@
   },
   "svelte": "./dist/lib/index.js",
   "type": "module",
-  "types": "./dist/lib/index.d.ts",
-  "version": "1.1.5"
+  "types": "./dist/lib/index.d.ts"
 }