@valerius_petrini/corekit-ui 0.1.83 → 0.1.85

package/dist/actions/portal.d.ts

@@ -0,0 +1,3 @@
+export declare function portal(node: HTMLElement, target?: string): {
+    destroy(): void;
+};

package/dist/actions/portal.js

@@ -0,0 +1,9 @@
+export function portal(node, target = 'body') {
+    const targetEl = document.querySelector(target);
+    targetEl.appendChild(node);
+    return {
+        destroy() {
+            node.remove();
+        }
+    };
+}

package/dist/components/display/Accordion/AccordionItem.svelte

@@ -0,0 +1,64 @@
+<script module>
+    let counter = 0;
+</script>
+
+<script lang="ts">
+    import { getContext } from "svelte";
+    import type { AccordionItemProps, AccordionContext } from "./types.js";
+    import { Button } from "$components/inputs";
+    import { slide } from "svelte/transition";
+    import ChevronRight from "@lucide/svelte/icons/chevron-right";
+	import { twMerge } from "tailwind-merge";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        title = "",
+        open = $bindable(false),
+        static: isStatic = false,
+        disabled = false,
+        ontoggle = undefined,
+        id = "accordion-item-" + counter++,
+        ...restProps
+    }: AccordionItemProps = $props();
+
+    const ctx = getContext<AccordionContext | undefined>('accordion');
+
+    const isOpen = $derived(ctx ? ctx.activeIds.has(id) : open);
+
+    function toggle() {
+        if (disabled || isStatic) return;
+        if (ctx)
+            ctx.setActive(id);
+        else
+            open = !open;
+        ontoggle?.(!isOpen);
+    }
+
+    const combinedClass = $derived(twMerge(
+        "w-full bg-sub-background rounded-none",
+        className
+    ));
+
+    const buttonClass = $derived(twMerge(
+        "justify-start p-2 w-full gap-1 rounded-none",
+        disabled ? "cursor-not-allowed opacity-50" : "",
+        isStatic ? "cursor-default" : "",
+        isOpen ? "border-b border-b-sub-background-border" : "",
+    ));
+</script>
+
+<div class={combinedClass} {...restProps}>
+    {#if !isStatic}
+        <Button aria-controls="content-{id}" id="trigger-{id}" class={buttonClass} size="full" color="sub" onclick={toggle} aria-expanded={isOpen}>
+            <ChevronRight size={18} class="transition-transform duration-200 {isOpen ? 'rotate-90' : ''}"/>
+            {title}
+        </Button>
+    {/if}
+
+    {#if isOpen || isStatic}
+        <div id="content-{id}" role="region" class="content p-2" transition:slide={{ duration: 200 }}>
+            {@render children?.()}
+        </div>
+    {/if}
+</div>

package/dist/components/display/Accordion/AccordionItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AccordionItemProps } from "./types.ts";
+declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "open">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/components/display/Accordion/index.stories.svelte

@@ -0,0 +1,26 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Text from "../../typography/Text/index.svelte";
+    import Accordion from "./index.svelte";
+	import AccordionItem from "./AccordionItem.svelte";
+
+	const { Story } = defineMeta({
+		title: "Components/Display/Accordion",
+		component: Accordion,
+		argTypes: {
+
+		},
+	});
+</script>
+
+<Story name="Default" args={{  }}>
+    <AccordionItem title="Accordion Item 1">
+        <Text>This is the content of the first accordion item.</Text>
+    </AccordionItem>
+    <AccordionItem title="Accordion Item 2" static>
+        <Text>This is the content of the second accordion item.</Text>
+    </AccordionItem>
+    <AccordionItem title="Accordion Item 3">
+        <Text>This is the content of the third accordion item.</Text>
+    </AccordionItem>
+</Story>

package/dist/components/display/Accordion/index.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Index: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Index = InstanceType<typeof Index>;
+export default Index;

package/dist/components/display/Accordion/index.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { setContext } from "svelte";
+    import type { AccordionProps, AccordionContext } from "./types.js";
+	import { twMerge } from "tailwind-merge";
+
+    let {
+        children,
+        class: className = "",
+        exclusive = false,
+        ...restProps
+    }: AccordionProps = $props();
+
+    let activeIds = $state<Set<string>>(new Set());
+
+    function setActive(id: string | null) {
+        if (!id) {
+            activeIds = new Set();
+            return;
+        }
+        if (exclusive) {
+            activeIds = activeIds.has(id) ? new Set() : new Set([id]);
+        } else {
+            const next = new Set(activeIds);
+            next.has(id) ? next.delete(id) : next.add(id);
+            activeIds = next;
+        }
+    }
+
+    setContext<AccordionContext>('accordion', {
+        get exclusive() { return exclusive; },
+        get activeIds() { return activeIds; },
+        setActive
+    });
+
+    const combinedClass = $derived(twMerge(
+        "w-full rounded overflow-hidden divide-y divide-sub-background-border",
+        className
+    ));
+</script>
+
+<div class={combinedClass} {...restProps}>
+    {@render children?.()}
+</div>

package/dist/components/display/Accordion/index.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AccordionProps } from "./types.ts";
+declare const Index: import("svelte").Component<AccordionProps, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/components/display/Accordion/types.d.ts

@@ -0,0 +1,16 @@
+import type { BaseComponentProps } from "../../../types/BaseComponent";
+export interface AccordionItemProps extends BaseComponentProps {
+    title: string;
+    open?: boolean;
+    disabled?: boolean;
+    static?: boolean;
+    ontoggle?: (open: boolean) => void;
+}
+export interface AccordionProps extends BaseComponentProps {
+    exclusive?: boolean;
+}
+export interface AccordionContext {
+    exclusive: boolean;
+    activeIds: Set<string>;
+    setActive: (id: string) => void;
+}

package/dist/components/display/Accordion/types.js

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

package/dist/components/display/Tree/TreeNode.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+    import Text from "../../typography/Text/index.svelte";
+    import { getContext, setContext } from "svelte";
+    import type { TreeNodeProps, TreeContext } from "./types.js";
+    import { slide } from "svelte/transition";
+    import ChevronRight from "@lucide/svelte/icons/chevron-right";
+	import { twMerge } from "tailwind-merge";
+
+    let {
+        children = undefined,
+        class: className = "",
+        label = "",
+        open = $bindable(false),
+        disabled = false,
+        ...restProps
+    }: TreeNodeProps = $props();
+
+    const ctx = getContext<TreeContext>('tree');
+
+    const depth = ctx.depth;
+
+    setContext<TreeContext>('tree', {
+        depth: depth + 1
+    });
+
+    function toggle() {
+        if (disabled || !children) return;
+        open = !open;
+    }
+
+    const combinedClass = $derived(twMerge(
+        "w-full",
+        className
+    ));
+
+    const rowClass = $derived(twMerge(
+        "flex items-center gap-1 py-1 w-full text-sm",
+        disabled ? "opacity-50 cursor-not-allowed" : children ? "cursor-pointer hover:bg-sub-background" : "cursor-default",
+    ));
+</script>
+
+<li class={combinedClass} role="treeitem" aria-expanded={children ? open : undefined} {...restProps}>
+    <Text
+        class={rowClass}
+        style="padding-left: {depth * 1.25 / 2}rem"
+        onclick={toggle}
+        onkeydown={(e: KeyboardEvent) => e.key === 'Enter' && toggle()}
+        tabindex={disabled ? -1 : 0}
+        role="button">
+        <Text label="span" class="shrink-0 transition-transform duration-200 {open ? 'rotate-90' : ''} {children ? 'visible' : 'invisible'}">
+            <ChevronRight size={14} />
+        </Text>
+        {label}
+    </Text>
+
+    {#if open && children}
+        <ul class="vpcui-tree-list relative" style="--vpcui-tree-depth: {depth * 1.25}rem" role="group" transition:slide={{ duration: 200 }}>
+            {@render children()}
+        </ul>
+    {/if}
+</li>
+
+<style>
+    .vpcui-tree-list::before {
+        content: '';
+        position: absolute;
+        left: calc(var(--vpcui-tree-depth) / 2 + 0.375rem);
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        background-color: var(--color-sub-background-border);
+    }
+
+    :global(.vpcui-tree-list > :not(li[role="treeitem"])) {
+        padding-left: calc(var(--vpcui-tree-depth) / 2 + 1rem);
+    }
+</style>

package/dist/components/display/Tree/TreeNode.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TreeNodeProps } from "./types.ts";
+declare const TreeNode: import("svelte").Component<TreeNodeProps, {}, "open">;
+type TreeNode = ReturnType<typeof TreeNode>;
+export default TreeNode;

package/dist/components/display/Tree/index.stories.svelte

@@ -0,0 +1,35 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Text from "../../typography/Text/index.svelte";
+    import Tree from "./index.svelte";
+	import TreeNode from "./TreeNode.svelte";
+
+	const { Story } = defineMeta({
+		title: "Components/Display/Tree",
+		component: Tree,
+		argTypes: {
+
+		},
+	});
+</script>
+
+<Story name="Default" args={{  }}>
+    <TreeNode label="Node 1">
+        <Text>This is the content of the first tree node.</Text>
+        <TreeNode label="Child Node 1">
+            <Text>This is the content of the first child node.</Text>
+        </TreeNode>
+    </TreeNode>
+    <TreeNode label="Node 2">
+        <Text>This is the content of the second tree node.</Text>
+        <TreeNode label="Child Node 2">
+            <Text>This is the content of the second child node.</Text>
+            <TreeNode label="Grandchild Node 1">
+                <Text>This is the content of the first grandchild node.</Text>
+            </TreeNode>
+        </TreeNode>
+    </TreeNode>
+    <TreeNode label="Node 3">
+        <Text>This is the content of the third tree node.</Text>
+    </TreeNode>
+</Story>

package/dist/components/display/Tree/index.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Index: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Index = InstanceType<typeof Index>;
+export default Index;

package/dist/components/display/Tree/index.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { setContext } from "svelte";
+    import type { TreeProps, TreeContext } from "./types.js";
+	import { twMerge } from "tailwind-merge";
+
+    let {
+        children,
+        class: className = "",
+        ...restProps
+    }: TreeProps = $props();
+
+    setContext<TreeContext>('tree', {
+        depth: 0
+    });
+
+    const combinedClass = $derived(twMerge(
+        "w-full",
+        className
+    ));
+</script>
+
+<ul class={combinedClass} role="tree" {...restProps}>
+    {@render children?.()}
+</ul>

package/dist/components/display/Tree/index.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TreeProps } from "./types.ts";
+declare const Index: import("svelte").Component<TreeProps, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/components/display/Tree/types.d.ts

@@ -0,0 +1,15 @@
+import type { BaseComponentProps } from "../../../types/BaseComponent";
+import type { Snippet } from "svelte";
+export interface TreeProps extends BaseComponentProps {
+    children?: Snippet;
+}
+export interface TreeNodeProps extends BaseComponentProps {
+    label: string;
+    children?: Snippet;
+    open?: boolean;
+    disabled?: boolean;
+    depth?: number;
+}
+export interface TreeContext {
+    depth: number;
+}

package/dist/components/display/Tree/types.js

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

package/dist/components/display/index.d.ts

@@ -2,6 +2,12 @@ export { default as Card } from "./Card/index.svelte";
 export { default as Table } from "./Table/index.svelte";
 export { default as KBD } from "./KBD/index.svelte";
 export { default as Skeleton } from "./Skeleton/index.svelte";
+export { default as Accordion } from "./Accordion/index.svelte";
+export { default as AccordionItem } from "./Accordion/AccordionItem.svelte";
+export { default as Tree } from "./Tree/index.svelte";
+export { default as TreeNode } from "./Tree/TreeNode.svelte";
 export type { CardProps } from "./Card/types.ts";
 export type { TableProps } from "./Table/types.ts";
 export type { SkeletonProps } from "./Skeleton/types.ts";
+export type { AccordionProps, AccordionItemProps, AccordionContext } from "./Accordion/types.ts";
+export type { TreeProps, TreeNodeProps, TreeContext } from "./Tree/types.ts";

package/dist/components/display/index.js

@@ -2,3 +2,7 @@ export { default as Card } from "./Card/index.svelte";
 export { default as Table } from "./Table/index.svelte";
 export { default as KBD } from "./KBD/index.svelte";
 export { default as Skeleton } from "./Skeleton/index.svelte";
+export { default as Accordion } from "./Accordion/index.svelte";
+export { default as AccordionItem } from "./Accordion/AccordionItem.svelte";
+export { default as Tree } from "./Tree/index.svelte";
+export { default as TreeNode } from "./Tree/TreeNode.svelte";

package/dist/components/inputs/ColorInput/index.svelte

@@ -19,6 +19,7 @@
     import { Input } from "..";
 
     import Pipette from "@lucide/svelte/icons/pipette";
+	import { portal } from "../../../actions/portal";
 
     let { 
         children = undefined, 
@@ -89,6 +90,7 @@
 
         const { x, y } = await computePosition(element, floatingEl, {
             placement: "bottom-start",
+            strategy: "absolute",
             middleware: [
                 offset(8),
                 flip(),
@@ -300,8 +302,9 @@
         {@const hsv = hexToHsv(value || "#000000")}
         <div
             bind:this={floatingEl}
+            use:portal
             transition:fly={{ y: -10, duration: 200 }}
-            class="fixed z-999999 bg-sub-background rounded-md p-4 flex gap-2.5 flex-wrap"
+            class="absolute z-999999 bg-sub-background rounded-md p-4 flex gap-2.5 flex-wrap"
             style="top: {dropdownY}px; left: {dropdownX}px; min-width: {referenceWidth}px; max-width: calc(100vw - 16px);"
         >
             <div class="color-canvas relative rounded h-36 cursor-crosshair" style="background-color: hsl({hue}, 100%, 50%);" bind:this={canvasEl}>

package/dist/components/inputs/Combobox/index.svelte

@@ -11,6 +11,7 @@
     import BaseInput from "../helper/BaseInput.svelte";
     import Text from "../../typography/Text/index.svelte";
     import { fly } from "svelte/transition";
+	import { portal } from "../../../actions/portal";
 
     let { 
         children = undefined, 
@@ -26,6 +27,7 @@
         value = $bindable(),
         onfocus = undefined,
         onblur = undefined,
+        onselectitem = undefined,
         required = false,
         disabled = false,
         size = "md",
@@ -78,6 +80,7 @@
         value = option;
         isFocused = false;
         inputElement?.blur();
+        onselectitem?.(value);
     }
 
     function initFloating(node: HTMLDivElement) {
@@ -90,6 +93,7 @@
 
             const { x, y } = await computePosition(element!, node, {
                 placement: "bottom-start",
+                strategy: "absolute",
                 middleware: [offset(8), flip(), shift({ padding: 8 })]
             });
 
@@ -150,6 +154,7 @@
             if (option) {
                 value = option;
                 isFocused = false;
+                onselectitem?.(value);
                 inputElement?.blur();
             }
             activeIndex = 0;
@@ -223,7 +228,8 @@
         {#if isFocused}
             <div
                 use:initFloating
-                style="position: fixed; top: {dropdownY}px; left: {dropdownX}px; width: {referenceWidth}px;"
+                use:portal
+                style="position: absolute; top: {dropdownY}px; left: {dropdownX}px; width: {referenceWidth}px;"
                 style:visibility={ready ? "visible" : "hidden"}
                 transition:fly={{ y: -10, duration: 200 }}
                 class="z-999999 overflow-hidden border border-white/10 bg-sub-background shadow-xl shadow-black/40 {getSizeStyleClass(radius, 'radius')}"

package/dist/components/inputs/Combobox/types.d.ts

@@ -4,5 +4,6 @@ export interface ComboboxProps extends BaseInputProps {
     placeholder?: string;
     onfocus?: (e?: FocusEvent) => void;
     onblur?: (e?: FocusEvent) => void;
+    onselectitem?: (value: string) => void;
     limit?: number;
 }

package/dist/components/navigation/Navbar/NavbarDropdown.svelte

@@ -14,6 +14,7 @@
 
     import ChevronUp from "@lucide/svelte/icons/chevron-up";
     import ChevronDown from "@lucide/svelte/icons/chevron-down";
+	import { portal } from "../../../actions/portal.js";
 
     let {
         children = undefined,
@@ -46,6 +47,7 @@
         async function updatePosition() {
             const { x: fx, y: fy, placement } = await computePosition(element!, node, {
                 placement: "bottom-start",
+                strategy: "absolute",
                 middleware: [offset(4), flip(), shift({ padding: 12 })],
             });
             x = fx;
@@ -102,8 +104,9 @@
 {#if open}
     <div
         use:initDropdown
+        use:portal
         role="menu"
-        style="position: fixed; top: {y}px; left: {x}px;"
+        style="position: absolute; top: {y}px; left: {x}px;"
         class="z-100 shadow-lg"
         style:visibility={ready ? "visible" : "hidden"}
     >

package/dist/components/overlay/Tooltip/index.svelte

@@ -15,6 +15,7 @@
         autoUpdate
 
     } from "@floating-ui/dom";
+	import { portal } from "../../../actions/portal.js";
 
     let {
         text,
@@ -44,6 +45,7 @@
 
         const { x: fx, y: fy, placement, middlewareData } = await computePosition(trigger, tooltipEl, {
             placement: position,
+            strategy: "absolute",
             middleware: [
                 offset(8),
                 flip(),
@@ -156,8 +158,9 @@
 {#if visible}
     <div
         bind:this={tooltipEl}
+        use:portal
         role="tooltip"
-        style="position: fixed; top: {y}px; left: {x}px;"
+        style="position: absolute; top: {y}px; left: {x}px;"
         class="z-999999 {interactive ? 'pointer-events-auto' : 'pointer-events-none'}"
         onmouseenter={onTooltipEnter}
         onmouseleave={onTooltipLeave}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@valerius_petrini/corekit-ui",
-	"version": "0.1.83",
+	"version": "0.1.85",
 	"description": "Component Library used across all my projects",
 	"author": "Valerius Petrini Jr.",
 	"license": "MIT",