seblify 0.1.4

package/README.md

@@ -0,0 +1,18 @@
+# Seblify
+
+> First package publish test
+
+Svelte component library for Seblify.
+
+## Installation
+
+```bash
+npm install seblify
+```
+
+## Usage
+
+```ts
+import { Button, Badge } from 'seblify';
+import 'seblify/theme.css';
+```

package/dist/components/AppShell.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    banners?: Snippet;
+    children?: Snippet;
+    drawer?: Snippet;
+    snackbars?: Snippet;
+    sidebar?: Snippet;
+    toasts?: Snippet;
+    sidebarWidth?: string;
+  }
+
+  let {
+    banners,
+    children,
+    drawer,
+    snackbars,
+    sidebar,
+    toasts,
+    sidebarWidth = '280px',
+  }: Props = $props();
+</script>
+
+<div class="app-shell" style:--sidebar-width={sidebarWidth}>
+  {#if banners}
+    <div class="banner-stack" aria-label="Page alerts">
+      {@render banners()}
+    </div>
+  {/if}
+
+  <div class="app-body">
+    {#if sidebar}
+      <aside class="sidebar">
+        {@render sidebar()}
+      </aside>
+    {/if}
+
+    <main class="main-content" tabindex="-1">
+      {@render children?.()}
+    </main>
+  </div>
+
+  {#if toasts}
+    <div class="toast-region" aria-live="polite" aria-label="Confirmations">
+      {@render toasts()}
+    </div>
+  {/if}
+
+  {#if snackbars}
+    <div class="snackbar-region" aria-live="polite" aria-label="Notifications">
+      {@render snackbars()}
+    </div>
+  {/if}
+
+  {#if drawer}
+    <div class="drawer-layer">
+      {@render drawer()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .app-shell {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    background: var(--app-shell-background, var(--seblify-color-page, #f4f6f8));
+    color: var(--app-shell-color, var(--seblify-color-text, #172033));
+  }
+
+  .banner-stack {
+    position: relative;
+    z-index: 100;
+    display: grid;
+    width: 100%;
+  }
+
+  .app-body {
+    flex: 1;
+    display: grid;
+    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+    min-height: 0;
+  }
+
+  .sidebar {
+    min-width: 0;
+    background: transparent;
+  }
+
+  .main-content {
+    min-width: 0;
+  }
+
+  .toast-region {
+    position: fixed;
+    top: 16px;
+    left: 50%;
+    z-index: 650;
+    display: grid;
+    gap: 8px;
+    width: min(420px, calc(100vw - 32px));
+    transform: translateX(-50%);
+  }
+
+  .snackbar-region {
+    position: fixed;
+    right: 16px;
+    bottom: 16px;
+    z-index: 700;
+    display: grid;
+    gap: 8px;
+    width: min(360px, calc(100vw - 32px));
+  }
+
+  .drawer-layer {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    pointer-events: none;
+  }
+
+  .drawer-layer :global(*) {
+    pointer-events: auto;
+  }
+
+  @media (max-width: 760px) {
+    .app-body {
+      grid-template-columns: 1fr;
+    }
+
+    .sidebar {
+      border-bottom: 0;
+    }
+  }
+</style>

package/dist/components/AppShell.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    banners?: Snippet;
+    children?: Snippet;
+    drawer?: Snippet;
+    snackbars?: Snippet;
+    sidebar?: Snippet;
+    toasts?: Snippet;
+    sidebarWidth?: string;
+}
+declare const AppShell: import("svelte").Component<Props, {}, "">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;

package/dist/components/Banner.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type BannerTone = 'info' | 'success' | 'warning' | 'error';
+
+  interface Props {
+    children?: Snippet;
+    tone?: BannerTone;
+  }
+
+  let { children, tone = 'info' }: Props = $props();
+</script>
+
+<section
+  class="banner"
+  class:success={tone === 'success'}
+  class:warning={tone === 'warning'}
+  class:error={tone === 'error'}
+>
+  <div class="content">
+    {@render children?.()}
+  </div>
+</section>
+
+<style>
+  .banner {
+    width: 100%;
+    border-bottom: 1px solid var(--seblify-color-info-border, #bfd1ea);
+    background: var(--seblify-color-info-surface, #eaf3ff);
+    color: var(--seblify-color-info-text, #102f55);
+  }
+
+  .content {
+    padding: 10px 16px;
+    font-size: 14px;
+    line-height: 1.4;
+  }
+
+  .success {
+    border-bottom-color: var(--seblify-color-success-border, #b8ddc7);
+    background: var(--seblify-color-success-surface, #e8f8ee);
+    color: var(--seblify-color-success-text, #143d25);
+  }
+
+  .warning {
+    border-bottom-color: var(--seblify-color-warning-border, #e8d28f);
+    background: var(--seblify-color-warning-surface, #fff6d8);
+    color: var(--seblify-color-warning-text, #4d3900);
+  }
+
+  .error {
+    border-bottom-color: var(--seblify-color-error-border, #efb6b6);
+    background: var(--seblify-color-error-surface, #fff0f0);
+    color: var(--seblify-color-error-text, #5a1717);
+  }
+</style>

package/dist/components/Banner.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type BannerTone = 'info' | 'success' | 'warning' | 'error';
+interface Props {
+    children?: Snippet;
+    tone?: BannerTone;
+}
+declare const Banner: import("svelte").Component<Props, {}, "">;
+type Banner = ReturnType<typeof Banner>;
+export default Banner;

package/dist/components/Button.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type ButtonVariant = 'primary' | 'secondary';
+  type ButtonType = 'button' | 'submit' | 'reset';
+
+  interface Props {
+    children?: Snippet;
+    disabled?: boolean;
+    onclick?: (event: MouseEvent) => void;
+    type?: ButtonType;
+    variant?: ButtonVariant;
+  }
+
+  let {
+    children,
+    disabled = false,
+    onclick,
+    type = 'button',
+    variant = 'primary',
+  }: Props = $props();
+</script>
+
+<button {disabled} {onclick} {type} class:secondary={variant === 'secondary'}>
+  {@render children?.()}
+</button>
+
+<style>
+  button {
+    min-height: 36px;
+    border: 1px solid var(--seblify-color-fill-accent, #146a6f);
+    border-radius: 6px;
+    padding: 0 14px;
+    background: var(--seblify-color-fill-accent, #146a6f);
+    color: var(--seblify-color-fill-accent-text, #ffffff);
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  button:hover:not(:disabled) {
+    background: var(--seblify-color-fill-accent-hover, #0d4d52);
+  }
+
+  button:focus-visible {
+    outline: 3px solid var(--seblify-color-focus-ring, #9bd4d8);
+    outline-offset: 2px;
+  }
+
+  button:disabled {
+    cursor: not-allowed;
+    opacity: var(--seblify-opacity-disabled, 0.56);
+  }
+
+  .secondary {
+    border-color: var(--seblify-color-border, #c8d2df);
+    background: var(--seblify-color-surface, #ffffff);
+    color: var(--seblify-color-text, #172033);
+  }
+
+  .secondary:hover:not(:disabled) {
+    background: var(--seblify-color-surface-hover, #f1f4f9);
+  }
+</style>

package/dist/components/Button.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type ButtonVariant = 'primary' | 'secondary';
+type ButtonType = 'button' | 'submit' | 'reset';
+interface Props {
+    children?: Snippet;
+    disabled?: boolean;
+    onclick?: (event: MouseEvent) => void;
+    type?: ButtonType;
+    variant?: ButtonVariant;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/Icon.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  const iconModules = import.meta.glob("../icons/**/*.svg", {
+    eager: true,
+    import: "default"
+  });
+
+  interface Props {
+    alt?: string;
+    name?: string;
+    size?: number;
+  }
+
+  let { alt = "", name = "", size = 24 }: Props = $props();
+
+  function normalizeNameToPath(value: unknown): string | null {
+    const safe = typeof value === "string" ? value.trim() : "";
+
+    if (safe.length === 0) {
+      return null;
+    }
+
+    const parts = safe.split("-").filter((part) => part.length > 0);
+
+    if (parts.length < 2) {
+      return null;
+    }
+
+    const folder = parts[0];
+    const file = parts.slice(1).join("-");
+
+    return `../icons/${folder}/${file}.svg`;
+  }
+
+  let groupedPath = $derived(normalizeNameToPath(name));
+  let iconPath = $derived(
+    (groupedPath != null ? iconModules[groupedPath] : undefined) ??
+      iconModules[`../icons/${name}.svg`] ??
+      ""
+  );
+</script>
+
+{#if iconPath}
+  <span
+    role={alt ? "img" : undefined}
+    aria-label={alt || undefined}
+    aria-hidden={alt ? undefined : "true"}
+    style:--icon-url={`url('${iconPath}')`}
+    style:width={`${size / 16}rem`}
+    style:height={`${size / 16}rem`}
+  ></span>
+{/if}
+
+<style>
+  span {
+    display: inline-block;
+    flex: 0 0 auto;
+    background-color: currentColor;
+    mask-image: var(--icon-url);
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    -webkit-mask-image: var(--icon-url);
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: contain;
+  }
+</style>

package/dist/components/Icon.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    alt?: string;
+    name?: string;
+    size?: number;
+}
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/Sidebar.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface SidebarNavItem {
+    active?: boolean;
+    href?: string;
+    label: string;
+  }
+
+  interface Props {
+    bottomItems?: SidebarNavItem[];
+    logo?: Snippet;
+    topItems?: SidebarNavItem[];
+  }
+
+  let { bottomItems = [], logo, topItems = [] }: Props = $props();
+</script>
+
+<aside class="sidebar">
+  {#if logo}
+    <div class="brand">
+      {@render logo()}
+    </div>
+  {/if}
+
+  <nav class="nav-section top" aria-label="Primary navigation">
+    {#each topItems as item}
+      <a
+        class="nav-item"
+        class:active={item.active}
+        href={item.href ?? '#'}
+        aria-current={item.active ? 'page' : undefined}
+      >
+        {item.label}
+      </a>
+    {/each}
+  </nav>
+
+  {#if bottomItems.length > 0}
+    <nav class="nav-section bottom" aria-label="Secondary navigation">
+      {#each bottomItems as item}
+        <a
+          class="nav-item"
+          class:active={item.active}
+          href={item.href ?? '#'}
+          aria-current={item.active ? 'page' : undefined}
+        >
+          {item.label}
+        </a>
+      {/each}
+    </nav>
+  {/if}
+</aside>
+
+<style>
+  .sidebar {
+    display: flex;
+    flex-direction: column;
+    width: 16.5rem;
+    max-width: 100%;
+    min-height: 100%;
+    background: var(--seblify-color-surface-inverse, #172033);
+  }
+
+  .brand {
+    padding: 1.5rem 1rem;
+    color: var(--seblify-color-text-inverse, #ffffff);
+  }
+
+  .nav-section {
+    display: grid;
+    gap: 0.25rem;
+    margin: 0 1rem;
+  }
+
+  .top {
+    align-content: start;
+  }
+
+  .bottom {
+    margin-top: auto;
+    padding-bottom: 1rem;
+  }
+
+  .nav-item {
+    display: block;
+    width: 100%;
+    border-radius: 0.375rem;
+    padding: 0.75rem 1rem;
+    color: var(--seblify-color-text-inverse, #ffffff);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    text-decoration: none;
+    box-sizing: border-box;
+  }
+
+  .nav-item:hover {
+    background: var(--seblify-color-surface-inverse-hover, #263043);
+    color: var(--seblify-color-text-inverse, #ffffff);
+  }
+
+  .active {
+    background: var(--seblify-color-surface-inverse-hover, #263043);
+    color: var(--seblify-color-text-inverse, #ffffff);
+  }
+</style>

package/dist/components/Sidebar.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface SidebarNavItem {
+    active?: boolean;
+    href?: string;
+    label: string;
+}
+interface Props {
+    bottomItems?: SidebarNavItem[];
+    logo?: Snippet;
+    topItems?: SidebarNavItem[];
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/Snackbar.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children?: Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
+<section class="snackbar" role="status">
+  {@render children?.()}
+</section>
+
+<style>
+  .snackbar {
+    border: 1px solid var(--seblify-color-border-inverse, #263043);
+    border-radius: 6px;
+    padding: 12px 14px;
+    background: var(--seblify-color-surface-inverse, #172033);
+    color: var(--seblify-color-text-inverse, #ffffff);
+    box-shadow: var(--seblify-shadow-raised, 0 12px 28px rgb(23 32 51 / 22%));
+    font-size: 14px;
+    line-height: 1.4;
+  }
+</style>

package/dist/components/Snackbar.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
+declare const Snackbar: import("svelte").Component<Props, {}, "">;
+type Snackbar = ReturnType<typeof Snackbar>;
+export default Snackbar;

package/dist/components/Toast.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children?: Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
+<section class="toast" role="status">
+  {@render children?.()}
+</section>
+
+<style>
+  .toast {
+    border: 1px solid var(--seblify-color-success-border, #b8ddc7);
+    border-radius: 999px;
+    padding: 8px 14px;
+    background: var(--seblify-color-success-surface, #e8f8ee);
+    color: var(--seblify-color-success-text, #143d25);
+    box-shadow: var(--seblify-shadow-status, 0 10px 24px rgb(20 61 37 / 14%));
+    font-size: 14px;
+    line-height: 1.4;
+    text-align: center;
+  }
+</style>

package/dist/components/Toast.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
+declare const Toast: import("svelte").Component<Props, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;