@valerius_petrini/corekit-ui 0.1.82 → 0.1.84

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/Card/index.stories.svelte

@@ -12,7 +12,7 @@
 		argTypes: {
 			variant: {
 				control: "select",
-				options: ["bordered", "elevated"],
+				options: ["bordered", "elevated", "ghost", "flat"],
 			},
 			size: {
 				control: "select",
@@ -28,8 +28,16 @@
 	});
 </script>
 
-<Story name="Default" args={{ variant: "bordered", size: "md" }}>
+{#snippet header()}
+	<img src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg" alt="Card">
+{/snippet}
+
+{#snippet footer()}
+	<Button href="https://example.com" external class="ml-auto mr-4" color="sub">Learn More</Button>
+	<Button href="https://example.com" external>Get Started</Button>
+{/snippet}
+
+<Story name="Default" args={{ variant: "bordered", size: "md", footer, header }}>
     <Text tag="h2" class="text-2xl font-bold mb-4">Customizable Card</Text>
     <Text class="mb-4">This is a customizable card component. You can add any content here and style it as needed.</Text>
-    <Button href="https://example.com" target="_blank">Learn More</Button>
 </Story>

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

@@ -14,12 +14,14 @@
         variant = "bordered",
         size = "md",
         radius = "md",
+        footer = undefined,
+        header = undefined,
         ...restProps
     }: CardProps = $props();
 
     let combinedClass = $derived(twMerge(
-        "text-main-text rounded-lg transition-all ease-in-out bg-gradient-to-br from-sub-background to-sub-background-accent p-4 w-full", 
-        href && "block hover:bg-sub-background-hover cursor-pointer",
+        "text-main-text rounded-lg transition-colors transition-all ease-in-out bg-gradient-to-br from-sub-background to-sub-background-accent p-4 w-full flex flex-col", 
+        href && "block hover:from-sub-background-hover hover:to-sub-background-hover cursor-pointer hover:border-sub-background-border-hover hover:-translate-y-0.5",
         cardVariantStyles[variant],
         getSizeStyleClass(size, "card"),
         getSizeStyleClass(radius, "radius"),
@@ -43,5 +45,17 @@
     {...restProps}
     bind:this={element}
 >
+    {#if header}
+        <div class="-mx-4 -mt-4 mb-4 overflow-hidden">
+            {@render header()}
+        </div>
+    {/if}
+    
     {@render children?.()}
+
+    {#if footer}
+        <div class="flex items-center justify-between border-t border-sub-background-border mt-4 -mx-4 -mb-4 px-4 py-3 text-sm text-sub-text">
+            {@render footer()}
+        </div>
+    {/if}
 </svelte:element>

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

@@ -1,6 +1,7 @@
+import type { Snippet } from "svelte";
 import type { SizeStyle } from "../../../styles/size";
 import type { BaseComponentProps } from "../../../types/BaseComponent";
-export type CardVariant = "bordered" | "elevated";
+export type CardVariant = "bordered" | "elevated" | "ghost" | "flat";
 /**
  * <Corekit UI> A Card component
  *
@@ -13,4 +14,6 @@ export interface CardProps extends BaseComponentProps {
     variant?: CardVariant;
     size?: SizeStyle;
     radius?: SizeStyle;
+    footer?: Snippet;
+    header?: Snippet;
 }

package/dist/components/display/Card/variant.js

@@ -1,4 +1,6 @@
 export const cardVariantStyles = {
     bordered: "border-[1px] border-sub-background-border",
-    elevated: "shadow-md",
+    elevated: "shadow-[0_4px_12px_rgba(0,0,0,0.35)]",
+    ghost: "bg-transparent border-transparent",
+    flat: "border border-transparent shadow-none",
 };

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, 
@@ -90,6 +91,7 @@
 
             const { x, y } = await computePosition(element!, node, {
                 placement: "bottom-start",
+                strategy: "absolute",
                 middleware: [offset(8), flip(), shift({ padding: 8 })]
             });
 
@@ -223,7 +225,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/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/navigation/Navbar/NavbarElement.svelte

@@ -20,6 +20,7 @@
 
     const combinedClass = $derived(twMerge(
         defaultClass,
+        (color === "sub") && "bg-transparent",
         className,
         active ? activeClass : "",
     ));

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/dist/styles/layout.css

@@ -18,6 +18,7 @@
     --color-form-background: var(--vpcui-form-background);
     --color-form-hover: var(--vpcui-form-hover);
     --color-form-border: var(--vpcui-form-border);
+    --color-sub-background-border-hover: var(--vpcui-sub-background-border-hover);
 
     --color-primary: var(--vpcui-primary);
     --color-secondary: var(--vpcui-secondary);
@@ -79,8 +80,9 @@
     --vpcui-main-background: var(--vpcui-light-50);
     --vpcui-sub-background: var(--vpcui-light-100);
     --vpcui-sub-background-hover: var(--vpcui-light-150);
-    --vpcui-sub-background-border: var(--vpcui-light-150);
-    --vpcui-sub-background-accent: var(--vpcui-light-150);
+    --vpcui-sub-background-border: var(--vpcui-light-200);
+    --vpcui-sub-background-accent: var(--vpcui-light-50);
+    --vpcui-sub-background-border-hover: var(--vpcui-light-250);
     --vpcui-main-text: var(--vpcui-light-950);
     --vpcui-sub-text: var(--vpcui-light-300);
     --vpcui-contrast-text: var(--vpcui-light-950);
@@ -109,8 +111,9 @@ html.dark {
     --vpcui-main-background: var(--vpcui-dark-50);
     --vpcui-sub-background: var(--vpcui-dark-100);
     --vpcui-sub-background-hover: var(--vpcui-dark-150);
-    --vpcui-sub-background-border: var(--vpcui-dark-150);
-    --vpcui-sub-background-accent: var(--vpcui-dark-125);
+    --vpcui-sub-background-border: var(--vpcui-dark-200);
+    --vpcui-sub-background-accent: var(--vpcui-dark-150);
+    --vpcui-sub-background-border-hover: var(--vpcui-dark-250);
     --vpcui-main-text: var(--vpcui-dark-950);
     --vpcui-sub-text: var(--vpcui-dark-300);
     --vpcui-contrast-text: var(--vpcui-dark-50);

package/package.json

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