@valerius_petrini/corekit-ui 0.1.87 → 0.1.89

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

@@ -0,0 +1,18 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+    import DataGrid from "./index.svelte";
+
+	const { Story } = defineMeta({
+		title: "Components/Display/DataGrid",
+		component: DataGrid,
+	});
+</script>
+
+<Story name="Default" args={{ tableHeaders:[
+    { key: "name", label: "Name" },
+    { key: "age", label: "Age" },
+    { key: "email", label: "Email" },
+], tableData: [
+    { name: "John Doe", age: 30, email: "john.doe@example.com" },
+    { name: "Jane Smith", age: 25, email: "jane.smith@example.com" }
+] }}></Story>

package/dist/components/display/DataGrid/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/DataGrid/index.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { defaultTableClass, defaultTableHeaderClass, defaultTableCellClass, defaultTableBodyClass } from "../table";
+    import type { DataGridProps } from "./types";
+    import { twMerge } from "tailwind-merge";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        element = $bindable(),
+        tableHeaders = [],
+        tableData = [],
+        size = "md",
+        radius = "md",
+        ...restProps
+    }: DataGridProps = $props();
+
+    const combinedTableClass = $derived(twMerge(
+        defaultTableClass,
+        className
+    ));
+
+    const combinedTableHeaderClass = $derived(twMerge(defaultTableHeaderClass, defaultTableCellClass));
+</script>
+
+<div class="overflow-auto w-full" bind:this={element}>
+    <table {...restProps} class={combinedTableClass}>
+        <thead>
+            <tr>
+                {#each tableHeaders as header}
+                    <th class={combinedTableHeaderClass}>{header.label}</th>
+                {/each}
+            </tr>
+        </thead>
+        <tbody>
+            {#each tableData as row}
+                <tr class={defaultTableBodyClass}>
+                    {#each tableHeaders as header}
+                        <td class={defaultTableCellClass}>{row[header.key]}</td>
+                    {/each}
+                </tr>
+            {/each}
+        </tbody>
+    </table>
+</div>

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

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

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

@@ -0,0 +1,12 @@
+import type { SizeStyle } from "../../../styles/size.js";
+import type { BaseComponentProps } from "../../../types/BaseComponent.ts";
+export interface DataGridHeaders {
+    key: string;
+    label: string;
+}
+export interface DataGridProps extends BaseComponentProps {
+    tableHeaders?: DataGridHeaders[];
+    tableData?: any[];
+    size?: SizeStyle;
+    radius?: SizeStyle;
+}

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

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

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/display/Table/TableBody.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { twMerge } from "tailwind-merge";
+
+
+    import type { TableBodyProps } from "./types";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        element = $bindable(),
+        ...restProps
+    }: TableBodyProps = $props();
+
+    const combinedTableBodyClass = $derived(twMerge(
+        "[&_tr]:even:bg-sub-background [&_tr]:odd:bg-sub-background-hover",
+        className
+    ));
+</script>
+
+<tbody class={combinedTableBodyClass} bind:this={element} {...restProps}>
+    {@render children?.()}
+</tbody>

package/dist/components/display/Table/TableBody.svelte.d.ts

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

package/dist/components/display/Table/TableCell.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+    import { defaultTableCellClass } from "../table";
+    import type { TableCellProps } from "./types";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        element = $bindable(),
+        ...restProps
+    }: TableCellProps = $props();
+
+    const combinedTableCellClass = $derived(twMerge(
+        defaultTableCellClass,
+        className
+    ));
+</script>
+
+<td class={combinedTableCellClass} bind:this={element} {...restProps}>
+    {@render children?.()}
+</td>

package/dist/components/display/Table/TableCell.svelte.d.ts

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

package/dist/components/display/Table/TableHeadCell.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+    import { defaultTableCellClass, defaultTableHeaderClass } from "../table";
+    import type { TableHeadCellProps } from "./types";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        element = $bindable(),
+        size = "md",
+        radius = "md",
+        ...restProps
+    }: TableHeadCellProps = $props();
+
+    const combinedTableHeaderClass = $derived(twMerge(
+        defaultTableHeaderClass,
+        defaultTableCellClass,
+        className
+    ));
+</script>
+
+<th class={combinedTableHeaderClass} bind:this={element} {...restProps}>
+    {@render children?.()}
+</th>

package/dist/components/display/Table/TableHeadCell.svelte.d.ts

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

package/dist/components/display/Table/TableHeader.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import type { TableHeaderProps } from "./types";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        element = $bindable(),
+        ...restProps
+    }: TableHeaderProps = $props();
+</script>
+
+<thead class={className} bind:this={element} {...restProps}>
+    {@render children?.()}
+</thead>

package/dist/components/display/Table/TableHeader.svelte.d.ts

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

package/dist/components/display/Table/TableRow.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import type { TableProps } from "./types";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        element = $bindable(),
+        ...restProps
+    }: TableProps = $props();
+</script>
+
+<tr class={className} bind:this={element} {...restProps}>
+    {@render children?.()}
+</tr>

package/dist/components/display/Table/TableRow.svelte.d.ts

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

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

@@ -0,0 +1,47 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Table from "./index.svelte";
+    import TableHeader from "./TableHeader.svelte";
+    import TableRow from "./TableRow.svelte";
+    import TableHeadCell from "./TableHeadCell.svelte";
+    import { TableBody } from "..";
+    import TableCell from "./TableCell.svelte";
+  import { Button } from "../../inputs";
+  import { Tooltip } from "../../overlay";
+
+	const { Story } = defineMeta({
+		title: "Components/Display/Table",
+		component: Table,
+	});
+
+    const userData = [
+        { name: "John Doe", age: 30, email: "johndoe@email.com" },
+        { name: "Jane Smith", age: 25, email: "janesmith@email.com" }
+    ];
+</script>
+
+<Story name="Default">
+    <TableHeader>
+        <TableRow>
+            <TableHeadCell>Name</TableHeadCell>
+            <TableHeadCell>Age</TableHeadCell>
+            <TableHeadCell>Email</TableHeadCell>
+            <TableHeadCell></TableHeadCell>
+        </TableRow>
+    </TableHeader>
+
+    <TableBody>
+        {#each userData as user}
+            <TableRow>
+                <TableCell>{user.name}</TableCell>
+                <TableCell>{user.age}</TableCell>
+                <TableCell>{user.email}</TableCell>
+                <TableCell>
+                    <Tooltip text="Edit User">
+                        <Button size="sm">Edit</Button>
+                    </Tooltip>
+                </TableCell>
+            </TableRow>
+        {/each}
+    </TableBody>
+</Story>

package/dist/components/display/Table/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/Table/index.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { defaultTableClass } from "../table";
     import type { TableProps } from "./types";
     import { twMerge } from "tailwind-merge";
 
@@ -6,43 +7,19 @@
         children = undefined, 
         class: className = "",
         element = $bindable(),
-        tableHeaders = [],
-        tableData = [],
         size = "md",
         radius = "md",
         ...restProps
     }: TableProps = $props();
 
-    const defaultTableClass = "w-full border-collapse text-main-text border border-form-border border-l-0";
-    const defaultTableHeaderClass = "text-left border-b border-b-1 border-b-form-border bg-sub-background font-medium";
-    const defaultTableCellClass = "p-2 text-sm border-l border-l-[1px] border-l-form-border";
-    const defaultTableBodyClass = "even:bg-sub-background odd:bg-sub-background-hover";
-
     const combinedTableClass = $derived(twMerge(
         defaultTableClass,
         className
     ));
-
-    const combinedTableHeaderClass = $derived(twMerge(defaultTableHeaderClass, defaultTableCellClass));
 </script>
 
 <div class="overflow-auto w-full" bind:this={element}>
     <table {...restProps} class={combinedTableClass}>
-        <thead>
-            <tr>
-                {#each tableHeaders as header}
-                    <th class={combinedTableHeaderClass}>{header.label}</th>
-                {/each}
-            </tr>
-        </thead>
-        <tbody>
-            {#each tableData as row}
-                <tr class={defaultTableBodyClass}>
-                    {#each tableHeaders as header}
-                        <td class={defaultTableCellClass}>{row[header.key]}</td>
-                    {/each}
-                </tr>
-            {/each}
-        </tbody>
+        {@render children()}
     </table>
 </div>

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

@@ -1,12 +1,14 @@
 import type { SizeStyle } from "../../../styles/size.js";
 import type { BaseComponentProps } from "../../../types/BaseComponent.ts";
-export interface TableHeaders {
-    key: string;
-    label: string;
-}
 export interface TableProps extends BaseComponentProps {
-    tableHeaders?: TableHeaders[];
-    tableData?: any[];
     size?: SizeStyle;
     radius?: SizeStyle;
 }
+export interface TableHeaderProps extends BaseComponentProps {
+}
+export interface TableHeadCellProps extends BaseComponentProps {
+}
+export interface TableCellProps extends BaseComponentProps {
+}
+export interface TableBodyProps extends BaseComponentProps {
+}

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

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

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

@@ -1,13 +1,23 @@
 export { default as Card } from "./Card/index.svelte";
-export { default as Table } from "./Table/index.svelte";
+export { default as DataGrid } from "./DataGrid/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 { default as Table } from "./Table/index.svelte";
+export { default as TableHeader } from "./Table/TableHeader.svelte";
+export { default as TableHeadCell } from "./Table/TableHeadCell.svelte";
+export { default as TableCell } from "./Table/TableCell.svelte";
+export { default as TableBody } from "./Table/TableBody.svelte";
 export type { CardProps } from "./Card/types.ts";
-export type { TableProps } from "./Table/types.ts";
+export type { DataGridProps } from "./DataGrid/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";
+export type { TableProps } from "./Table/types.ts";
+export type { TableHeaderProps } from "./Table/types.ts";
+export type { TableHeadCellProps } from "./Table/types.ts";
+export type { TableCellProps } from "./Table/types.ts";
+export type { TableBodyProps } from "./Table/types.ts";

package/dist/components/display/index.js

@@ -1,8 +1,13 @@
 export { default as Card } from "./Card/index.svelte";
-export { default as Table } from "./Table/index.svelte";
+export { default as DataGrid } from "./DataGrid/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 { default as Table } from "./Table/index.svelte";
+export { default as TableHeader } from "./Table/TableHeader.svelte";
+export { default as TableHeadCell } from "./Table/TableHeadCell.svelte";
+export { default as TableCell } from "./Table/TableCell.svelte";
+export { default as TableBody } from "./Table/TableBody.svelte";

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

@@ -0,0 +1,4 @@
+export declare const defaultTableClass = "w-full border-collapse text-main-text border border-form-border border-l-0";
+export declare const defaultTableHeaderClass = "text-left border-b border-b-1 border-b-form-border bg-sub-background font-medium";
+export declare const defaultTableCellClass = "p-2 text-sm border-l border-l-[1px] border-l-form-border";
+export declare const defaultTableBodyClass = "even:bg-sub-background odd:bg-sub-background-hover";

package/dist/components/display/table.js

@@ -0,0 +1,4 @@
+export const defaultTableClass = "w-full border-collapse text-main-text border border-form-border border-l-0";
+export const defaultTableHeaderClass = "text-left border-b border-b-1 border-b-form-border bg-sub-background font-medium";
+export const defaultTableCellClass = "p-2 text-sm border-l border-l-[1px] border-l-form-border";
+export const defaultTableBodyClass = "even:bg-sub-background odd:bg-sub-background-hover";

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

@@ -9,60 +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} use:multiAction={use}>
+<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/package.json

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