@valerius_petrini/corekit-ui 0.1.86 → 0.1.88

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

@@ -38,6 +38,6 @@
 {/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 tag="h2" class="mb-2">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>
 </Story>

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

@@ -0,0 +1,11 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Skeleton from "./index.svelte";
+
+	const { Story } = defineMeta({
+		title: "Components/Display/Skeleton",
+		component: Skeleton,
+	});
+</script>
+
+<Story name="Default"></Story>

package/dist/components/display/Skeleton/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/inputs/Checkbox/index.stories.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Checkbox from "./index.svelte";
+	import { colorStyles, colorStyleTypes } from "../../../styles/color.js";
+    import { sizeStyles } from "../../../styles/size.js";
+
+	const { Story } = defineMeta({
+		title: "Components/Inputs/Checkbox",
+		component: Checkbox,
+		argTypes: {
+			size: {
+				control: "select",
+				options: sizeStyles,
+			},
+			radius: {
+				control: "select",
+				options: sizeStyles,
+			}
+		},
+	});
+</script>
+
+<Story name="Default" args={{ label: "Input Label" }}></Story>

package/dist/components/inputs/Checkbox/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/inputs/Checkbox/index.svelte

@@ -19,7 +19,7 @@
         ...restProps
     }: CheckboxProps = $props();
 
-    let defaultClass = "z-20 bg-form-input-background text-main-text rounded-lg outline-none focus:ring-2 focus:ring-blue-500 transition-all";
+    let defaultClass = "w-4 h-4 z-20 bg-form-background text-main-text rounded outline-none transition-all checked:bg-blue-500";
     let defaultLabelClass = "block text-sub-text font-medium";
     let defaultDivClass = "relative flex items-center gap-2";
 
@@ -28,7 +28,7 @@
     let combinedDivClass = $derived(twMerge(defaultDivClass, divClass));
 </script>
 
-<div class={combinedDivClass}>
+<Text tag="label" for={id} class={combinedDivClass}>
     <input
         type="checkbox"
         id={id}
@@ -36,7 +36,28 @@
         class={combinedClass}
         {...restProps}
         bind:this={element}/>
-    <Text tag="label" for={id} class={combinedLabelClass}>
-        {label}
-    </Text>
-</div>
+    {label}
+</Text>
+
+<style>
+    input[type="checkbox"] {
+        appearance: none;
+    }
+
+    input[type="checkbox"]:checked::before {
+        transform: scale(1);
+    }
+
+    input[type="checkbox"]::before {
+        content: "";
+        width: 80%;
+        height: 80%;
+        margin: 1.5px;
+        transform: scale(0);
+        transform-origin: bottom left;
+        transition: 150ms transform ease-in-out;
+        display: block;
+        background-color: white;
+        clip-path: polygon(14% 44%, 0% 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    }
+</style>

package/dist/components/inputs/Select/index.stories.svelte

@@ -0,0 +1,33 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Select from "./index.svelte";
+    import { sizeStyles } from "../../../styles/size.js";
+
+	const { Story } = defineMeta({
+		title: "Components/Inputs/Select",
+		component: Select,
+		argTypes: {
+			size: {
+				control: "select",
+				options: sizeStyles,
+			},
+			radius: {
+				control: "select",
+				options: sizeStyles,
+			},
+            type: {
+                control: "select",
+                options: ["text", "password", "email", "number", "search", "tel", "url"],
+            },
+		},
+	});
+</script>
+
+<Story name="Default" args={{ label: "Input Label", placeholder: "Select an Item", options: [
+    { label: "Option 1", value: "option1" },
+    { label: "Option 2", value: "option2" },
+    { label: "Option 3", value: "option3" },
+    { label: "Option 4", value: "option4" },
+    { label: "Option 5", value: "option5" },
+    { label: "Option 6", value: "option6" },
+]}}></Story>

package/dist/components/inputs/Select/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/inputs/Select/index.svelte

@@ -13,6 +13,7 @@
         children = undefined, 
         class: className = "",
         element = $bindable(),
+        placeholder = "",
         label = "",
         labelClass = "",
         divClass = "", 
@@ -77,6 +78,9 @@
             bind:value={value}
             style={customStyle}
             {...restProps}>
+            {#if placeholder}
+                <option value="" disabled selected>{placeholder}</option>
+            {/if}
             {#each options as option}
                 <option value={option.value}>{option.label}</option>
             {/each}

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

@@ -4,4 +4,5 @@ export interface SelectProps extends BaseInputProps {
         value: any;
         label: string;
     }[];
+    placeholder: string;
 }

package/dist/components/typography/Link/index.stories.svelte

@@ -0,0 +1,16 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Link from "./index.svelte";
+
+	const { Story } = defineMeta({
+		title: "Components/Typography/Link",
+		component: Link,
+		argTypes: {
+			
+        }
+	});
+</script>
+
+<Story name="Default" args={{ href: "https://example.com" }}>
+    The quick brown fox jumps over the lazy dog.
+</Story>

package/dist/components/typography/Link/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/typography/Link/index.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { sizeStyleParts, type SizeStyleTheme } from "../../../styles/size";
+	import { getLinkProps } from "../../../utils/link.js";
+	import { multiAction } from "../../../utils/multiAction.js";
+    import type { TextProps } from "./types.js";
+    import { twMerge } from "tailwind-merge";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        element = $bindable(), 
+        href = "",
+        external = false,
+        size = "none",
+        use = [],
+        ...restProps
+    }: TextProps = $props();
+
+    let combinedClass = $derived(twMerge(
+        "text-main-text font-body text-link decoration-link/0 underline underline-offset-2 transition-all cursor-pointer duration-150 hover:decoration-link  text-base", 
+        sizeStyleParts[size as SizeStyleTheme]?.text || "",
+        className
+    ));
+</script>
+
+<a bind:this={element} {href} class={combinedClass} {...restProps} use:multiAction={use} {...getLinkProps(href, external, false)}>
+    {@render children?.()}
+</a>

package/dist/components/typography/Link/index.svelte.d.ts

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

package/dist/components/typography/Link/types.d.ts

@@ -0,0 +1,7 @@
+import type { SizeStyle } from "../../../styles/size.ts";
+import type { BaseComponentProps } from "../../../types/BaseComponent.ts";
+export interface TextProps extends BaseComponentProps {
+    href?: string;
+    external?: boolean;
+    size?: SizeStyle;
+}

package/dist/components/typography/Link/types.js

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

package/dist/components/typography/Text/index.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { sizeStyleParts, textStyle, type SizeStyleTheme } from "../../../styles/size";
+	import { multiAction } from "../../../utils/multiAction.js";
     import type { TextProps } from "./types.js";
     import { twMerge } from "tailwind-merge";
 
@@ -8,59 +9,43 @@
         class: className = "",
         element = $bindable(), 
         tag = "p",
-        shrink = undefined,
         size = "none",
+        use = [],
         ...restProps
     }: TextProps = $props();
 
-    const tagStyles: Record<string, { class: string; size: keyof typeof textStyle }> = {
-        "p": { class: "", size: "text-base" },
-        "div": { class: "", size: "text-base" },
-        "span": { class: "", size: "text-base" },
-        "label": { class: "text-sub-text font-semibold", size: "text-xs" },
-        "strong": { class: "font-bold", size: "text-base" },
-        "b": { class: "font-bold", size: "text-base" },
-        "em": { class: "italic", size: "text-base" },
-        "i": { class: "italic", size: "text-base" },
-        "u": { class: "underline", size: "text-base" },
-        "small": { class: "", size: "text-sm" },
-        "blockquote": { class: "border-l-4 border-gray-500 pl-2 opacity-70", size: "text-base" },
-        "pre": { class: "font-mono bg-sub-background px-3 py-2 rounded overflow-x-auto whitespace-pre", size: "text-base" },
-        "code": { class: "font-mono bg-sub-background px-1 rounded inline-block", size: "text-base" },
-        "a": { class: "text-blue-400 decoration-blue-400/0 underline underline-offset-2 transition-all cursor-pointer duration-150 hover:decoration-blue-400 ", size: "text-base" },
-        "li": { class: "text-base list-disc list-inside", size: "text-base" },
-        "h1": { class: "font-bold font-display", size: "text-4xl" },
-        "h2": { class: "font-bold font-display", size: "text-3xl" },
-        "h3": { class: "font-semibold font-display", size: "text-2xl" },
-        "h4": { class: "font-semibold font-display", size: "text-xl" },
-        "h5": { class: "font-medium font-display", size: "text-lg" },
-        "h6": { class: "font-normal font-display", size: "text-base" }
+    const tagStyles: Record<string, string> = {
+        "p": "text-base",
+        "div": " text-base",
+        "span": " text-base",
+        "label": "text-sub-text font-semibold text-xs",
+        "strong": "font-bold text-base",
+        "b": "font-bold text-base",
+        "em": "italic text-base",
+        "i": "italic text-base",
+        "u": "underline text-base",
+        "small": " text-sm",
+        "blockquote": "border-l-4 border-gray-500 pl-2 opacity-70 text-base",
+        "pre": "font-mono bg-sub-background px-3 py-2 rounded overflow-x-auto whitespace-pre text-base",
+        "code": "font-mono bg-sub-background px-1 rounded inline-block text-base",
+        "a": "text-link decoration-link/0 underline underline-offset-2 transition-all cursor-pointer duration-150 hover:decoration-link  text-base",
+        "li": "text-base list-disc list-inside text-base",
+        "h1": "font-bold font-display text-4xl",
+        "h2": "font-bold font-display text-3xl",
+        "h3": "font-semibold font-display text-2xl",
+        "h4": "font-semibold font-display text-xl",
+        "h5": "font-medium font-display text-lg",
+        "h6": "font-normal font-display text-base"
     };
 
-    function getTextSizeInRem(): string {
-        if (size !== "none") {
-            const sizeKey = (sizeStyleParts[size as SizeStyleTheme]?.text ?? "text-base") as keyof typeof textStyle;
-            return textStyle[sizeKey] ?? textStyle["text-base"];
-        }
-
-        return textStyle[tagStyles[tag]?.size || "text-base"] ?? textStyle["text-base"];
-    }
-
-    let shrinkStyle = $derived(shrink 
-        ? `font-size: clamp(8px, ${shrink}cqi, ${getTextSizeInRem()}); white-space: nowrap; display: block; width: fit-content;` 
-        : ""
-    );
-
-    let defaultClass = "text-main-text font-body";    
     let combinedClass = $derived(twMerge(
-        defaultClass, 
-        tagStyles[tag]?.class || "", 
-        tagStyles[tag]?.size || "",
+        "text-main-text font-body", 
+        tagStyles[tag], 
         sizeStyleParts[size as SizeStyleTheme]?.text || "",
         className
     ));
 </script>
 
-<svelte:element bind:this={element} this={tag} style={shrinkStyle} class={combinedClass} {...restProps}>
+<svelte:element bind:this={element} this={tag} class={combinedClass} {...restProps} use:multiAction={use}>
     {@render children?.()}
 </svelte:element>

package/dist/components/typography/Text/types.d.ts

@@ -3,7 +3,6 @@ import type { BaseComponentProps } from "../../../types/BaseComponent.ts";
 type TextTagOptions = "p" | "div" | "span" | "label" | "strong" | "em" | "b" | "i" | "u" | "small" | "blockquote" | "pre" | "code" | "a" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 export interface TextProps extends BaseComponentProps {
     tag?: TextTagOptions;
-    shrink?: number;
     size?: SizeStyle;
 }
 export {};

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

@@ -1,4 +1,5 @@
 export { default as Text } from "./Text/index.svelte";
+export { default as Link } from "./Link/index.svelte";
 export { default as Typewriter } from "./Typewriter/index.svelte";
 export type { TextProps } from "./Text/types.ts";
 export type { TypewriterAction, DisplaySegment } from "./Typewriter/types.ts";

package/dist/components/typography/index.js

@@ -1,2 +1,3 @@
 export { default as Text } from "./Text/index.svelte";
+export { default as Link } from "./Link/index.svelte";
 export { default as Typewriter } from "./Typewriter/index.svelte";

package/dist/styles/layout.css

@@ -19,6 +19,7 @@
     --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-link: var(--vpcui-link);
 
     --color-primary: var(--vpcui-primary);
     --color-secondary: var(--vpcui-secondary);
@@ -93,8 +94,10 @@
     --vpcui-loader-btn-color: rgba(255, 255, 255, 0.25);
 
     --vpcui-font-display: ui-serif, Georgia, serif;
-    --vpcui-font-body: ui-sans-serif, system-ui sans-serif;
+    --vpcui-font-body: ui-sans-serif, system-ui, sans-serif;
     --vpcui-font-mono: ui-monospace, monospace;
+
+    --vpcui-link: #2673f1;
 }
 
 html.dark {
@@ -122,6 +125,8 @@ html.dark {
     --vpcui-form-hover: var(--vpcui-dark-200);
 
     --vpcui-loader-btn-color: rgba(0, 0, 0, 0.25);
+
+    --vpcui-link: #4a90e2;
 }
 
 html {

package/dist/types/BaseComponent.d.ts

@@ -1,9 +1,11 @@
+import type { Action } from "svelte/action";
 import type { SizeStyle } from "../styles/size";
 import type { Component } from "svelte";
 export interface BaseComponentProps {
     children?: any;
     class?: string;
     element?: HTMLElement;
+    use?: [Action, any?][];
     [key: string]: any;
 }
 export type InputVariant = "default" | "floating";

package/dist/utils/multiAction.d.ts

@@ -0,0 +1,4 @@
+import type { Action } from "svelte/action";
+export declare function multiAction(node: HTMLElement, actions: [Action, any?][]): {
+    destroy(): void;
+};

package/dist/utils/multiAction.js

@@ -0,0 +1,8 @@
+export function multiAction(node, actions) {
+    const instances = actions.map(([action, params]) => action(node, params));
+    return {
+        destroy() {
+            instances.forEach(isnt => isnt?.destroy?.());
+        }
+    };
+}

package/package.json

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