svelte-comp 1.1.3 → 1.1.4

package/dist/App.svelte

@@ -19,6 +19,7 @@
   import Toast from "./lib/Toast.svelte";
   import Tooltip from "./lib/Tooltip.svelte";
   import type { ToastVariant } from "./lib/types";
+  import Container from "./Container.svelte";
 
   const tabs = [
     { id: "overview", label: "Overview" },
@@ -151,15 +152,10 @@
   }
 </script>
 
-<main class="min-h-screen bg-[var(--color-bg-page)] text-[var(--color-text-default)]">
-  <div class="pointer-events-none absolute inset-0 overflow-hidden">
-    <div class="absolute -left-10 top-10 h-64 w-64 rounded-full bg-[var(--color-bg-primary)]/10 blur-3xl"></div>
-    <div class="absolute right-0 bottom-0 h-72 w-72 rounded-full bg-[var(--color-bg-warning)]/20 blur-3xl"></div>
-  </div>
-
+<Container>
   <div class="relative mx-auto max-w-6xl space-y-8 px-6 py-10">
     <section
-      class="relative overflow-hidden rounded-[28px] border border-[var(--border-color-default)] bg-gradient-to-br from-[var(--color-bg-surface)] via-white/70 to-[var(--color-bg-muted)] shadow-[0_20px_60px_-25px_var(--shadow-color)] dark:from-[var(--color-bg-surface)] dark:via-slate-900/70 dark:to-slate-900/50"
+      class="relative rounded-[28px] border border-[var(--border-color-default)] bg-gradient-to-br from-[var(--color-bg-surface)] via-white/70 to-[var(--color-bg-muted)] shadow-[0_20px_60px_-25px_var(--shadow-color)] dark:from-[var(--color-bg-surface)] dark:via-slate-900/70 dark:to-slate-900/50"
     >
       <div
         class="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(99,102,241,0.18),transparent_35%),radial-gradient(circle_at_80%_0%,rgba(16,185,129,0.14),transparent_25%)]"
@@ -168,7 +164,7 @@
       <div class="relative grid gap-8 p-8 md:p-10 lg:grid-cols-[1.1fr_0.9fr]">
         <div class="space-y-4">
           <p class="text-xs uppercase tracking-[0.25em] text-[var(--color-text-muted)]">
-            svelte-comp kit
+            svelte-comp
           </p>
           <h1 class="text-3xl font-bold leading-tight md:text-4xl">
             Component showcase
@@ -203,7 +199,7 @@
         </div>
 
         <div
-          class="space-y-4 rounded-2xl border border-[var(--border-color-default)] bg-white/70 p-5 shadow-lg backdrop-blur dark:bg-slate-900/60"
+          class="space-y-4 rounded-2xl border border-[var(--border-color-default)] bg-white/70 p-5 shadow-lg dark:bg-slate-900/60"
         >
           <div class="flex items-start justify-between gap-3">
             <div>
@@ -552,4 +548,4 @@
       timeout={3500}
     />
   {/each}
-</main>
+</Container>

package/dist/Container.svelte

@@ -0,0 +1,60 @@
+<!-- src/Container.svelte -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { cx } from "./utils";
+
+  type Props = {
+    header?: Snippet;
+    footer?: Snippet;
+    left?: Snippet;
+    right?: Snippet;
+    children?: Snippet;
+    class?: string;
+  };
+
+  let {
+    header,
+    footer,
+    left,
+    right,
+    children,
+    class: externalClass = "",
+  }: Props = $props();
+
+  const baseClass =
+    "min-h-dvh w-full bg-[var(--color-bg-page,oklch(98%_0_0))] text-[var(--color-text-default,oklch(15%_0_0))] transition-colors duration-[var(--transition-normal,300ms)]";
+
+  const rootClass = $derived(cx(baseClass, externalClass));
+</script>
+
+<div class={rootClass}>
+  <div class="grid min-h-dvh grid-rows-[auto_1fr_auto]">
+    {#if header}
+      <header class="p-[var(--spacing-md,1rem)]">
+        {@render header?.()}
+      </header>
+    {/if}
+
+    {#if left}
+      <aside class="hidden lg:block p-[var(--spacing-md,1rem)]">
+        {@render left?.()}
+      </aside>
+    {/if}
+
+    <main class="p-[var(--spacing-md,1rem)]">
+      {@render children?.()}
+    </main>
+
+    {#if right}
+      <aside class="hidden lg:block p-[var(--spacing-md,1rem)]">
+        {@render right?.()}
+      </aside>
+    {/if}
+
+    {#if footer}
+      <footer class="p-[var(--spacing-md,1rem)]">
+        {@render footer?.()}
+      </footer>
+    {/if}
+  </div>
+</div>

package/dist/Container.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+type Props = {
+    header?: Snippet;
+    footer?: Snippet;
+    left?: Snippet;
+    right?: Snippet;
+    children?: Snippet;
+    class?: string;
+};
+declare const Container: import("svelte").Component<Props, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/app.css

@@ -1,3 +1,235 @@
 /* src/app.css */
 
-@import "tailwindcss";
+@import "tailwindcss";
+
+/* src/styles.css */
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* COLORS — TEXT */
+  --color-text-default: oklch(15% 0 0deg);
+  --color-text-muted: oklch(60% 0 0deg);
+  --color-text-danger: oklch(92% 0.05 25deg);
+  --color-text-success: oklch(92% 0.05 150deg);
+  --color-text-warning: oklch(95% 0.05 90deg);
+  --color-text-link: oklch(35% 0.3 250deg);
+  --color-text-red: oklch(50% 0.25 30deg);
+
+  /* COLORS — BG */
+  --color-bg-page: oklch(98% 0 0deg);
+  --color-bg-surface: oklch(100% 0 0deg);
+  --color-bg-primary: oklch(62.3% 0.214 259.8deg);
+  --color-primary: var(--color-bg-primary);
+  --color-bg-secondary: oklch(80% 0 0deg);
+  --color-bg-danger: oklch(60% 0.25 30deg);
+  --color-bg-success: oklch(55% 0.2 150deg);
+  --color-bg-warning: oklch(75% 0.2 70deg);
+  --color-bg-muted: oklch(90% 0 0deg);
+
+  /* INTERACTION STATES */
+  --color-bg-hover: oklch(94% 0 0deg);
+  --color-bg-active: oklch(88% 0 0deg);
+
+  /* BORDER */
+  --border-color-default: oklch(85% 0 0deg);
+  --border-color-primary: oklch(50% 0.19 259.8deg);
+  --border-color-strong: oklch(75% 0 0deg);
+  --border-color-focus: oklch(68.7% 0.14 237.5deg);
+
+  /* SHADOW */
+  --shadow-color: oklch(0% 0 0deg / 0.15);
+
+  /* SPACING */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+
+  /* TYPOGRAPHY */
+  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: "Fira Code", "Consolas", "Monaco", monospace;
+
+  /* FONT WEIGHTS */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* TEXT SIZES */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-md: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+
+  /* LINE HEIGHT & LETTER SPACING */
+  --line-height-tight: 1.1;
+  --line-height-normal: 1.4;
+  --line-height-relaxed: 1.6;
+  --letter-spacing-tight: -0.01em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.02em;
+
+  /* RADIUS */
+  --radius-sm: 0.125rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-full: 9999px;
+
+  /* TRANSITIONS */
+  --transition-fast: 150ms;
+  --transition-normal: 300ms;
+  --transition-slow: 500ms;
+  --timing-default: ease-in-out;
+
+  /* OPACITY */
+  --opacity-disabled: 0.5;
+  --opacity-hover: 0.9;
+  --opacity-overlay: 0.7;
+
+  /* Z-INDEX */
+  --z-base: 0;
+  --z-dropdown: 10;
+  --z-overlay: 50;
+  --z-modal: 100;
+  --z-toast: 200;
+}
+
+.dark {
+  /* COLORS — TEXT */
+  --color-text-default: oklch(98% 0 0deg);
+  --color-text-muted: oklch(60% 0 0deg);
+  --color-text-danger: oklch(98% 0.02 25deg);
+  --color-text-success: oklch(92% 0.05 150deg);
+  --color-text-warning: oklch(95% 0.05 90deg);
+  --color-text-link: oklch(65% 0.3 250deg);
+  --color-text-red: oklch(50% 0.25 30deg);
+
+  /* COLORS — BG */
+  --color-bg-page: oklch(15% 0 0deg);
+  --color-bg-surface: oklch(26% 0 0deg);
+  --color-bg-primary: oklch(42% 0.19 259.8deg);
+  --color-primary: var(--color-bg-primary);
+  --color-bg-secondary: oklch(45% 0 0deg);
+  --color-bg-danger: oklch(50% 0.25 30deg);
+  --color-bg-success: oklch(45% 0.2 150deg);
+  --color-bg-warning: oklch(65% 0.2 70deg);
+  --color-bg-muted: oklch(30% 0 0deg);
+
+  /* INTERACTION STATES */
+  --color-bg-hover: oklch(25% 0 0deg);
+  --color-bg-active: oklch(18% 0 0deg);
+
+  /* BORDER */
+  --border-color-default: oklch(35% 0 0deg);
+  --border-color-primary: oklch(50% 0.17 259.8deg);
+  --border-color-strong: oklch(45% 0 0deg);
+  --border-color-focus: oklch(68.7% 0.14 237.5deg);
+
+  /* SHADOW */
+  --shadow-color: oklch(0% 0 0deg / 0.6);
+
+  /* OPACITY */
+  --opacity-disabled: 0.4;
+  --opacity-hover: 0.85;
+  --opacity-overlay: 0.6;
+}
+
+/* SCROLLBARS */
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-bg-secondary);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: oklch(from var(--color-bg-secondary) l c h / 0.8);
+}
+
+@supports (scrollbar-width: thin) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-bg-secondary) transparent;
+  }
+
+  .dark * {
+    scrollbar-color: oklch(from var(--color-bg-secondary) l c h / 0.7)
+      transparent;
+  }
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: oklch(from var(--color-bg-secondary) l c h / 0.7);
+}
+
+/* ----------------------------- */
+/* 🎨 Primary color palettes     */
+/* ----------------------------- */
+
+[data-primary="default"] {
+  --color-primary: oklch(62.3% 0.214 259.8deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="cyan"] {
+  --color-primary: oklch(86.5% 0.127 207.078);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="red"] {
+  --color-primary: oklch(58% 0.24 30deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="green"] {
+  --color-primary: oklch(65% 0.22 140deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="yellow"] {
+  --color-primary: oklch(75% 0.18 90deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="pink"] {
+  --color-primary: oklch(70% 0.25 350deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="orange"] {
+  --color-primary: oklch(72% 0.22 60deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="purple"] {
+  --color-primary: oklch(55% 0.22 290deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}

package/dist/lib/TimePicker.svelte

@@ -1,4 +1,4 @@
-<!-- src/lib/TimePicker.svelte -->
+<!-- src/lib/TimePicker.svelte -->
 <script lang="ts">
   /**
    * @component TimePicker
@@ -194,8 +194,8 @@
     {labelFinal}
   </div>
 
-  <div class="flex items-start gap-4">
-    <div class="flex flex-wrap gap-3 min-w-[0]">
+  <div class="flex flex-wrap items-start gap-4">
+    <div class="flex flex-wrap gap-3 min-w-[0] flex-1">
       {#if timeSystem === "iso"}
         <Select
           label={L.hour}
@@ -235,7 +235,7 @@
       />
     </div>
 
-    <div class="flex items-center gap-3 pt-6">
+    <div class="flex items-center gap-3 basis-full pt-2">
       <Button onClick={toggleSystem} {disabled} sz="xs">
         {timeSystem === "iso" ? L.switchTo12h : L.switchTo24h}
       </Button>
@@ -266,4 +266,4 @@
       {/if}
     </p>
   </div>
-</div>
+</div>

package/dist/main.d.ts

@@ -1,4 +1,3 @@
 import "./app.css";
-import "./styles.css";
 declare const app: {};
 export default app;

package/dist/main.js

@@ -1,6 +1,5 @@
 import { mount } from "svelte";
 import "./app.css";
-import "./styles.css";
 import App from "./App.svelte";
 var app = mount(App, {
     target: document.getElementById("app"),

package/package.json

@@ -47,5 +47,5 @@
   "svelte": "./dist/lib/index.js",
   "type": "module",
   "types": "./dist/lib/index.d.ts",
-  "version": "1.1.3"
+  "version": "1.1.4"
 }