@valerius_petrini/corekit-ui 0.1.82 → 0.1.83

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/navigation/Navbar/NavbarElement.svelte

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

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.83",
 	"description": "Component Library used across all my projects",
 	"author": "Valerius Petrini Jr.",
 	"license": "MIT",