svelte-comp 1.1.7 → 1.2.5

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);
@@ -142,8 +147,9 @@
 
 <div
   class={cx(
-    "w-full border border-[var(--border-color-default)] bg-[var(--color-bg-surface)]",
-    "text-[var(--color-text-default)]"
+    "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}
@@ -170,14 +176,20 @@
     </div>
   {/if}
 
-  <div class={cx("flex font-mono", TEXT[sz], LINE_HEIGHT[sz])}>
+  <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",
-          "bg-[var(--color-bg-surface)] tabular-nums min-h-[180px] max-h-[480px]"
+          "cv-gutter bg-[var(--color-bg-surface)] tabular-nums h-full min-h-0"
         )}
       >
         {#each lines as _, i (i)}
@@ -186,7 +198,7 @@
       </div>
     {/if}
 
-    <div class="relative flex-1 min-h-[180px] max-h-[480px]">
+    <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/Pagination.svelte

@@ -65,13 +65,14 @@
 </script>
 
 <div class={wrapperClass}>
-  <span>Page {currentPage} of {totalPages}</span>
+  <span class="pagination-count">Page {currentPage} of {totalPages}</span>
 
   <Button
     onClick={prevPage}
     disabled={currentPage === 1}
     sz="xs"
     variant="secondary"
+    class="pagination-btn"
   >
     &lt;
   </Button>
@@ -82,6 +83,7 @@
       sz="xs"
       variant={currentPage === page ? "primary" : "secondary"}
       aria-current={currentPage === page ? "page" : undefined}
+      class="pagination-btn"
     >
       {page}
     </Button>
@@ -92,7 +94,26 @@
     disabled={currentPage === totalPages}
     sz="xs"
     variant="secondary"
+    class="pagination-btn"
   >
     &gt;
   </Button>
 </div>
+
+<style>
+  @media (max-width: 640px) {
+    :global(.pagination-btn) {
+      font-size: 10px;
+      line-height: 1;
+      height: 20px;
+      padding: 0 6px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    :global(.pagination-count) {
+      display: none;
+    }
+  }
+</style>
+

package/dist/lib/SearchInput.svelte

@@ -0,0 +1,106 @@
+<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 (localized by default)
+   *
+   * @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 { getContext } from "svelte";
+  import Field from "./Field.svelte";
+  import type { FieldVariant, SizeKey } from "./types";
+  import { TEXTS } from "./lang";
+
+  type Props = {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    sz?: SizeKey;
+    variant?: FieldVariant;
+    class?: string;
+    [key: string]: unknown;
+  };
+
+  let {
+    label,
+    placeholder,
+    value = $bindable(''),
+    sz = 'sm',
+    variant = 'filled',
+    class: externalClass = '',
+    ...rest
+  }: Props = $props();
+
+  const langCtx =
+    getContext<{ value: keyof typeof TEXTS } | undefined>("lang") ?? null;
+  const langKey = $derived(langCtx?.value ?? "en");
+  const L = $derived(TEXTS[langKey].components.searchInput);
+
+  const placeholderFinal = $derived(placeholder ?? L.placeholder);
+</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={placeholderFinal}
+  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,13 @@
+import type { FieldVariant, SizeKey } from "./types";
+type Props = {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    sz?: SizeKey;
+    variant?: FieldVariant;
+    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/ThemeToggle.svelte

@@ -63,7 +63,7 @@
     xl: "px-6 py-3 h-10",
   };
 
-  const position = "fixed top-4 right-4";
+  const position = "fixed top-4 right-4 z-50";
 
   const mergedClass = $derived(
     cx(

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/dist/lib/lang.d.ts

@@ -29,6 +29,9 @@ export declare const TEXTS: {
                 readonly fileCount: "{n} file(s) selected";
                 readonly totalSize: "Total size";
             };
+            readonly searchInput: {
+                readonly placeholder: "Search";
+            };
             readonly menu: {
                 readonly subtitle: "Menu with size options";
             };
@@ -78,6 +81,9 @@ export declare const TEXTS: {
                 readonly fileCount: "{n} файл(ов) выбрано";
                 readonly totalSize: "Общий размер";
             };
+            readonly searchInput: {
+                readonly placeholder: "?????";
+            };
             readonly menu: {
                 readonly subtitle: "Меню с вариантами размеров";
             };
@@ -127,6 +133,9 @@ export declare const TEXTS: {
                 readonly fileCount: "{n} archivo(s) seleccionado(s)";
                 readonly totalSize: "Tamaño total";
             };
+            readonly searchInput: {
+                readonly placeholder: "Buscar";
+            };
             readonly menu: {
                 readonly subtitle: "Menú con opciones de tamaño";
             };

package/dist/lib/lang.js

@@ -29,6 +29,9 @@ var enTexts = {
             fileCount: "{n} file(s) selected",
             totalSize: "Total size",
         },
+        searchInput: {
+            placeholder: "Search",
+        },
         menu: { subtitle: "Menu with size options" },
         primaryColorSelect: { text: "Primary color" },
         timePicker: {
@@ -74,6 +77,9 @@ var ruTexts = {
             fileCount: "{n} файл(ов) выбрано",
             totalSize: "Общий размер",
         },
+        searchInput: {
+            placeholder: "?????",
+        },
         menu: { subtitle: "Меню с вариантами размеров" },
         primaryColorSelect: { text: "Основной цвет" },
         timePicker: {
@@ -119,6 +125,9 @@ var esTexts = {
             fileCount: "{n} archivo(s) seleccionado(s)",
             totalSize: "Tamaño total",
         },
+        searchInput: {
+            placeholder: "Buscar",
+        },
         menu: { subtitle: "Menú con opciones de tamaño" },
         primaryColorSelect: { text: "Color primario" },
         timePicker: {

package/package.json

@@ -1,4 +1,7 @@
 {
+  "name": "svelte-comp",
+  "version": "1.2.5",
+  "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.7"
+  "types": "./dist/lib/index.d.ts"
 }