seblify 0.2.0 → 0.2.1

package/dist/components/framework/navigation/sidenav/SidenavTree.svelte

@@ -1,265 +0,0 @@
-<script lang="ts">
-  import type { SeblifyProps } from 'seblify';
-  import SidenavTree from './SidenavTree.svelte';
-  import type { SidenavItem } from './sidenav';
-
-  type Props = SeblifyProps<{
-    activeItemIds: string[];
-    collapsedItemId?: string;
-    items: SidenavItem[];
-    currentHref?: string;
-    depth: number;
-    expandedItemId?: string;
-    onToggle: (id: string, open: boolean) => void;
-    retainedExpandedItemId?: string;
-  }>;
-
-  let {
-    activeItemIds,
-    collapsedItemId,
-    items,
-    currentHref,
-    depth,
-    expandedItemId,
-    onToggle,
-    retainedExpandedItemId,
-  }: Props = $props();
-
-  function isCurrent(item: SidenavItem): boolean {
-    return Boolean(item.href && item.href === currentHref);
-  }
-
-  function hasCurrentDescendant(item: SidenavItem): boolean {
-    return Boolean(
-      item.children?.some(
-        (child) =>
-          Boolean(child.href && child.href === currentHref) ||
-          hasCurrentDescendant(child),
-      ),
-    );
-  }
-
-  function containsItemId(item: SidenavItem, id: string | undefined): boolean {
-    return Boolean(
-      id &&
-      item.children?.some(
-        (child) => child.id === id || containsItemId(child, id),
-      ),
-    );
-  }
-
-  function isOpen(item: SidenavItem): boolean {
-    if (collapsedItemId === item.id) {
-      return false;
-    }
-
-    if (activeItemIds.includes(item.id)) {
-      return true;
-    }
-
-    if (expandedItemId) {
-      return item.id === expandedItemId || containsItemId(item, expandedItemId);
-    }
-
-    return (
-      item.id === retainedExpandedItemId ||
-      containsItemId(item, retainedExpandedItemId)
-    );
-  }
-</script>
-
-<ul class:root={depth === 0} class="sidenav-list">
-  {#each items as item}
-    {@const children = item.children ?? []}
-    {@const hasChildren = children.length > 0}
-    {@const current = isCurrent(item)}
-    {@const selectedBranch =
-      hasChildren && (current || hasCurrentDescendant(item))}
-    {@const sectionHeader = !item.href && !hasChildren}
-    {@const expanded = hasChildren && isOpen(item)}
-    {@const activeBranch = hasChildren && (expanded || selectedBranch)}
-    <li
-      class:active-branch={activeBranch}
-      class:item-node={!sectionHeader}
-      class:section-header={sectionHeader}
-    >
-      {#if sectionHeader}
-        <div class="section-label">{item.label}</div>
-      {:else}
-        <div class="item-row" style:--sidenav-indent={`${depth * 12}px`}>
-          {#if item.href}
-            <a class:current href={item.href}>{item.label}</a>
-          {:else}
-            <button
-              class:current
-              class="item-button"
-              onclick={() => onToggle(item.id, !expanded)}
-              type="button"
-            >
-              {item.label}
-            </button>
-          {/if}
-
-          {#if hasChildren}
-            <button
-              aria-expanded={expanded}
-              aria-label={expanded
-                ? `Collapse ${item.label}`
-                : `Expand ${item.label}`}
-              class="toggle"
-              onclick={() => onToggle(item.id, !expanded)}
-              type="button"
-            >
-              <span class:expanded>&gt;</span>
-            </button>
-          {/if}
-        </div>
-
-        {#if hasChildren && expanded}
-          <SidenavTree
-            {activeItemIds}
-            {collapsedItemId}
-            {currentHref}
-            depth={depth + 1}
-            {expandedItemId}
-            items={children}
-            {onToggle}
-            {retainedExpandedItemId}
-          />
-        {/if}
-      {/if}
-    </li>
-  {/each}
-</ul>
-
-<style>
-  .sidenav-list {
-    display: grid;
-    gap: 2px;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  .sidenav-list:not(.root) {
-    margin-top: 3px;
-  }
-
-  li {
-    border-radius: 8px;
-  }
-
-  .item-node {
-    padding: 4px;
-  }
-
-  .active-branch {
-    background: var(--seblify-color-surface-hover, #f1f4f9);
-  }
-
-  .section-header {
-    margin: 14px 0 4px;
-  }
-
-  .root > .section-header {
-    margin-top: 22px;
-  }
-
-  .section-label {
-    padding: 0 10px;
-    color: var(--seblify-color-text-subtle, #667085);
-    font-size: 0.72rem;
-    font-weight: 900;
-    letter-spacing: 0;
-    text-transform: uppercase;
-  }
-
-  .item-row {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    gap: 8px;
-    align-items: center;
-    min-height: 34px;
-  }
-
-  .root > .item-node > .item-row {
-    font-size: 1rem;
-  }
-
-  .sidenav-list:not(.root) > .item-node > .item-row {
-    font-size: 0.875rem;
-  }
-
-  .sidenav-list:not(.root) a,
-  .sidenav-list:not(.root) .item-button {
-    font-weight: 400;
-  }
-
-  a,
-  .item-button {
-    min-width: 0;
-    border: 0;
-    border-radius: 6px;
-    padding: 8px 8px 8px calc(10px + var(--sidenav-indent));
-    overflow: hidden;
-    color: inherit;
-    background: transparent;
-    font: inherit;
-    font-weight: 750;
-    text-align: left;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .item-button {
-    cursor: pointer;
-  }
-
-  a:hover,
-  .item-button:hover,
-  .toggle:hover {
-    color: var(--seblify-color-text, #172033);
-  }
-
-  .current {
-    color: var(--seblify-color-text, #172033);
-  }
-
-  .root > .item-node > .item-row > .current {
-    font-weight: 750;
-  }
-
-  .sidenav-list:not(.root) .current {
-    font-weight: 400;
-  }
-
-  .active-branch > .item-row > a,
-  .active-branch > .item-row > .item-button {
-    color: var(--seblify-color-text, #172033);
-  }
-
-  .toggle {
-    display: grid;
-    width: 30px;
-    height: 30px;
-    place-items: center;
-    border: 0;
-    border-radius: 6px;
-    color: var(--seblify-color-text-subtle, #667085);
-    background: transparent;
-    font: inherit;
-    cursor: pointer;
-  }
-
-  .toggle span {
-    display: block;
-    font-size: 1.15rem;
-    line-height: 1;
-    transition: transform 120ms ease;
-  }
-
-  .toggle span.expanded {
-    transform: rotate(90deg);
-  }
-</style>

package/dist/components/framework/navigation/sidenav/SidenavTree.svelte.d.ts

@@ -1,14 +0,0 @@
-import SidenavTree from './SidenavTree.svelte';
-import type { SidenavItem } from './sidenav';
-declare const SidenavTree: import("svelte").Component<{
-    activeItemIds: string[];
-    collapsedItemId?: string | undefined;
-    items: SidenavItem[];
-    currentHref?: string | undefined;
-    depth: number;
-    expandedItemId?: string | undefined;
-    onToggle: (id: string, open: boolean) => void;
-    retainedExpandedItemId?: string | undefined;
-}, {}, "">;
-type SidenavTree = ReturnType<typeof SidenavTree>;
-export default SidenavTree;

package/dist/components/framework/navigation/sidenav/sidenav.d.ts

@@ -1,6 +0,0 @@
-export interface SidenavItem {
-    id: string;
-    label: string;
-    href?: string;
-    children?: SidenavItem[];
-}

package/dist/components/framework/navigation/sidenav/sidenav.js

@@ -1 +0,0 @@
-export {};