@valerius_petrini/corekit-ui 0.1.88 → 0.1.90

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/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 { TableRowProps } from "./types";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        element = $bindable(),
+        ...restProps
+    }: TableRowProps = $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 { TableRowProps } from "./types";
+declare const TableRow: import("svelte").Component<TableRowProps, {}, "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,16 @@
 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 {
+}
+export interface TableRowProps extends BaseComponentProps {
+}

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

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

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

@@ -1,13 +1,25 @@
 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 { default as TableRow } from "./Table/TableRow.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";
+export type { TableRowProps } from "./Table/types.ts";

package/dist/components/display/index.js

@@ -1,8 +1,14 @@
 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 { default as TableRow } from "./Table/TableRow.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/package.json

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