@valerius_petrini/corekit-ui 0.1.65 → 0.1.69

package/dist/actions/toast.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ToastProps } from "../types/Toast.ts";
+import type { ToastProps } from "../components/feedback/Toast/types.ts";
 export declare const toastState: {
     items: (ToastProps & {
         id: number;

package/dist/actions/toast.svelte.js

@@ -1,5 +1,5 @@
 import { mount } from "svelte";
-import Toaster from "../components/Toaster.svelte";
+import Toaster from "../components/feedback/Toaster/index.svelte";
 let count = 0;
 let toasterMounted = false;
 export const toastState = $state({

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

@@ -0,0 +1,35 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Button from "../../inputs/Button/index.svelte";
+    import Text from "../../typography/Text/index.svelte";
+    import Card from "./index.svelte";
+	import { colorStyles, colorStyleTypes } from "../../../styles/color.js";
+    import { sizeStyles } from "../../../styles/size.js";
+
+	const { Story } = defineMeta({
+		title: "Components/Display/Card",
+		component: Card,
+		argTypes: {
+			variant: {
+				control: "select",
+				options: ["bordered", "elevated"],
+			},
+			size: {
+				control: "select",
+				options: sizeStyles,
+			},
+			radius: {
+				control: "select",
+				options: sizeStyles,
+			},
+			href: { control: "text" },
+			external: { control: "boolean" },
+		},
+	});
+</script>
+
+<Story name="Default" args={{ variant: "bordered", size: "md" }}>
+    <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.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/{Card.svelte → display/Card/index.svelte}

@@ -1,8 +1,9 @@
 <script lang="ts">
-    import { getLinkProps } from "../utils/link.js";
-    import { getSizeStyle, getSizeStyleClass } from "../styles/size.js";
-    import { cardVariantStyles, type CardProps } from "../types/Card.js";
+    import { getLinkProps } from "../../../utils/link.js";
+    import { getSizeStyle, getSizeStyleClass } from "../../../styles/size.js";
+    import { type CardProps } from "./types.js";
     import { twMerge } from "tailwind-merge";
+    import { cardVariantStyles } from "./variant.js";
 
     let { 
         children = undefined, 

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

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

package/dist/{types/Card.d.ts → components/display/Card/types.d.ts}

@@ -1,7 +1,6 @@
-import type { SizeStyle } from "../styles/size.ts";
-import type { BaseComponentProps } from "./BaseComponent.ts";
+import type { SizeStyle } from "$styles/size";
+import type { BaseComponentProps } from "$types/BaseComponent";
 export type CardVariant = "bordered" | "elevated";
-export declare const cardVariantStyles: Record<CardVariant, string>;
 export interface CardProps extends BaseComponentProps {
     href?: string;
     external?: boolean;

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

@@ -0,0 +1,2 @@
+import type { CardVariant } from "./types";
+export declare const cardVariantStyles: Record<CardVariant, string>;

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

@@ -0,0 +1,13 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+    import KBD from "./index.svelte";
+	import { colorStyles, colorStyleTypes } from "../../../styles/color.js";
+    import { sizeStyles } from "../../../styles/size.js";
+
+	const { Story } = defineMeta({
+		title: "Components/Display/KBD",
+		component: KBD,
+	});
+</script>
+
+<Story name="Default">Ctrl</Story>

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

@@ -0,0 +1,3 @@
+declare const Index: import("svelte").Component<any, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/components/{Skeleton.svelte → display/Skeleton/index.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { getSizeStyleClass } from "../styles/size.js";
-    import type { SkeletonProps } from "../types/Skeleton.js";
+    import { getSizeStyleClass } from "../../../styles/size.js";
+    import type { SkeletonProps } from "./types";
     import Image from "@lucide/svelte/icons/image";
     import Play from "@lucide/svelte/icons/play";
     import { twMerge } from "tailwind-merge";

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

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

package/dist/{types/Skeleton.d.ts → components/display/Skeleton/types.d.ts}

@@ -1,4 +1,4 @@
-import type { BaseComponentProps } from "./BaseComponent.ts";
+import type { BaseComponentProps } from "$types/BaseComponent";
 export type SkeletonVariant = "default" | "text" | "image" | "video" | "card";
 export interface SkeletonProps extends BaseComponentProps {
     variant?: SkeletonVariant;

package/dist/components/{Table.svelte → display/Table/index.svelte}

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { TableProps } from "../types/Table.js";
+    import type { TableProps } from "./types";
     import { twMerge } from "tailwind-merge";
 
     let { 

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

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

package/dist/{types/Table.d.ts → components/display/Table/types.d.ts}

@@ -1,5 +1,5 @@
-import type { SizeStyle } from "../styles/size.js";
-import type { BaseComponentProps } from "./BaseComponent.ts";
+import type { SizeStyle } from "../../../styles/size.js";
+import type { BaseComponentProps } from "../../../types/BaseComponent.ts";
 export interface TableHeaders {
     key: string;
     label: string;

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

@@ -0,0 +1,7 @@
+export { default as Card } from "./Card/index.svelte";
+export { default as Table } from "./Table/index.svelte";
+export { default as KBD } from "./KBD/index.svelte";
+export { default as Skeleton } from "./Skeleton/index.svelte";
+export type { CardProps } from "./Card/types.ts";
+export type { TableProps } from "./Table/types.ts";
+export type { SkeletonProps } from "./Skeleton/types.ts";

package/dist/components/display/index.js

@@ -0,0 +1,4 @@
+export { default as Card } from "./Card/index.svelte";
+export { default as Table } from "./Table/index.svelte";
+export { default as KBD } from "./KBD/index.svelte";
+export { default as Skeleton } from "./Skeleton/index.svelte";

package/dist/components/{Loader.svelte → feedback/Loader/index.svelte}

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { getSizeStyleClass } from "../styles/size.js";
+    import { getSizeStyleClass } from "$styles/size.js";
     import { twMerge } from "tailwind-merge";
-    import type { LoaderProps } from "../types/Loader.js";
-    import { generateColorStyle } from "../styles/color.js";
+    import type { LoaderProps } from "./types.js";
+    import { generateColorStyle } from "$styles/color.js";
 
     let { 
         class: className = "",

package/dist/components/feedback/Loader/index.svelte.d.ts

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

package/dist/components/feedback/Loader/types.d.ts

@@ -0,0 +1,7 @@
+import type { ColorStyle } from "$styles/color";
+import type { SizeStyle } from "$styles/size";
+import type { BaseComponentProps } from "../../../types/BaseComponent.ts";
+export interface LoaderProps extends BaseComponentProps {
+    size?: SizeStyle;
+    color?: ColorStyle;
+}

package/dist/components/{Modal.svelte → feedback/Modal/index.svelte}

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import type { ModalProps } from "../types/Modal.js";
+    import type { ModalProps } from "./types";
     import { fade, fly } from "svelte/transition";
-    import Card from "./Card.svelte";
-    import { positionParts } from "../styles/posititon.js";
+    import Card from "../../display/Card/index.svelte";
+    import { positionParts } from "../../../styles/posititon.js";
     import { twMerge } from "tailwind-merge";
 
     let { 

package/dist/components/feedback/Modal/index.svelte.d.ts

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

package/dist/components/feedback/Modal/types.d.ts

@@ -0,0 +1,6 @@
+import type { PositionStyle } from "../../../styles/posititon.js";
+import type { CardProps } from "../../display/Card/types";
+export interface ModalProps extends CardProps {
+    open?: boolean;
+    position?: PositionStyle;
+}

package/dist/components/{Progress.svelte → feedback/Progress/index.svelte}

@@ -1,9 +1,9 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import type { ProgressProps } from "../types/Progress.js";
+    import type { ProgressProps } from "./types.js";
     import { twMerge } from "tailwind-merge";
-    import { colorStyleParts } from "../styles/color.js";
-    import { sizeStyleParts, type SizeStyleTheme } from "../styles/size.js";
+    import { colorStyleParts } from "../../../styles/color.js";
+    import { sizeStyleParts, type SizeStyleTheme } from "../../../styles/size.js";
 
     let { 
         children = undefined, 

package/dist/components/feedback/Progress/index.svelte.d.ts

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

package/dist/{types/Progress.d.ts → components/feedback/Progress/types.d.ts}

@@ -1,6 +1,6 @@
-import type { ColorStyle } from "../styles/color.ts";
-import type { SizeStyle } from "../styles/size.ts";
-import type { BaseComponentProps } from "./BaseComponent.ts";
+import type { ColorStyle } from "../../../styles/color.ts";
+import type { SizeStyle } from "../../../styles/size.ts";
+import type { BaseComponentProps } from "../../../types/BaseComponent.ts";
 interface AnimateProps {
     from: number;
     to: number;

package/dist/components/{Toast.svelte → feedback/Toast/index.svelte}

@@ -1,8 +1,8 @@
 <script lang="ts">
     import { twMerge } from "tailwind-merge";
-    import type { ToastProps } from "../types/Toast.js";
-    import Text from "./Text.svelte";
-    import Progress from "./Progress.svelte";
+    import type { ToastProps } from "./types.js";
+    import Text from "../../typography/Text/index.svelte";
+    import Progress from "../Progress/index.svelte";
     import type { Component } from "svelte";
 
     import CircleCheck from "@lucide/svelte/icons/circle-check";
@@ -10,9 +10,9 @@
     import X from "@lucide/svelte/icons/x";
     import Info from "@lucide/svelte/icons/info";
     import TriangleAlert from "@lucide/svelte/icons/triangle-alert";
-    import { colorStyleParts, type ColorStyle } from "../styles/color.js";
-    import Button from "./Button.svelte";
-    import { getSizeStyleClass } from "../styles/size.js";
+    import { colorStyleParts, type ColorStyle } from "../../../styles/color.js";
+    import Button from "../../inputs/Button/index.svelte";
+    import { getSizeStyleClass } from "../../../styles/size.js";
     import { fly } from "svelte/transition";
     import { backOut } from "svelte/easing";
 

package/dist/components/feedback/Toast/index.svelte.d.ts

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

package/dist/{types/Toast.d.ts → components/feedback/Toast/types.d.ts}

@@ -1,6 +1,6 @@
-import type { PositionStyle } from "../styles/posititon.js";
-import type { SizeStyle } from "../styles/size.js";
-import type { BaseComponentProps } from "./BaseComponent.ts";
+import type { PositionStyle } from "../../../styles/posititon.js";
+import type { SizeStyle } from "../../../styles/size.js";
+import type { BaseComponentProps } from "../../../types/BaseComponent.ts";
 export type ToastType = "success" | "error" | "info" | "warning";
 export interface ToastProps extends BaseComponentProps {
     message: string;

package/dist/components/{Toaster.svelte → feedback/Toaster/index.svelte}

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { positionParts, type PositionStyle } from "../styles/posititon.js";
+    import { positionParts, type PositionStyle } from "../../../styles/posititon.js";
     import { flip } from "svelte/animate";
-    import { toastState, toast } from "../actions/toast.svelte.js";
-    import Toast from "./Toast.svelte";
+    import { toastState, toast } from "../../../actions/toast.svelte.js";
+    import Toast from "../Toast/index.svelte";
 
     const getItems = $derived((pos: PositionStyle) => {
         return toastState.items.filter(i => (i.position ?? 'top-right') === pos);

package/dist/components/feedback/Toaster/index.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Index: import("svelte").Component<Record<string, never>, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

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

@@ -0,0 +1,9 @@
+export { default as Loader } from "./Loader/index.svelte";
+export { default as Modal } from "./Modal/index.svelte";
+export { default as Progress } from "./Progress/index.svelte";
+export { default as Toast } from "./Toast/index.svelte";
+export { default as Toaster } from "./Toaster/index.svelte";
+export type { LoaderProps } from "./Loader/types.ts";
+export type { ModalProps } from "./Modal/types.ts";
+export type { ProgressProps } from "./Progress/types.ts";
+export type { ToastProps } from "./Toast/types.ts";

package/dist/components/feedback/index.js

@@ -0,0 +1,5 @@
+export { default as Loader } from "./Loader/index.svelte";
+export { default as Modal } from "./Modal/index.svelte";
+export { default as Progress } from "./Progress/index.svelte";
+export { default as Toast } from "./Toast/index.svelte";
+export { default as Toaster } from "./Toaster/index.svelte";

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

@@ -0,0 +1,53 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Button from "./index.svelte";
+	import { colorStyles, colorStyleTypes } from "../../../styles/color.js";
+    import { sizeStyles } from "../../../styles/size.js";
+
+	const { Story } = defineMeta({
+		title: "Components/Inputs/Button",
+		component: Button,
+		argTypes: {
+			color: {
+				control: "select",
+				options: colorStyles,
+			},
+			variant: {
+				control: "select",
+				options: colorStyleTypes,
+			},
+			size: {
+				control: "select",
+				options: sizeStyles,
+			},
+			radius: {
+				control: "select",
+				options: sizeStyles,
+			},
+			disabled: { control: "boolean" },
+			loading: { control: "boolean" },
+			pill: { control: "boolean" },
+			icon: { control: "boolean" },
+			square: { control: "boolean" },
+			href: { control: "text" },
+			external: { control: "boolean" },
+		},
+	});
+</script>
+
+<Story name="Default" args={{ color: "primary", size: "md" }}>Click me</Story>
+
+<Story name="Disabled" args={{ color: "primary", disabled: true }}>
+	Disabled
+</Story>
+
+<Story name="Loading" args={{ color: "primary", loading: true }}>Loading</Story>
+
+<Story name="Pill" args={{ color: "primary", pill: true }}>Pill Button</Story>
+
+<Story
+  name="As Link"
+  args={{ color: "primary", href: "https://example.com", external: true }}
+>
+	Go somewhere
+</Story>

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

@@ -0,0 +1,98 @@
+<script lang="ts">
+    import { generateColorStyle } from "$styles/color";
+    import {
+        getSizeStyle,
+        getSizeStyleClass,
+        getSizeStyleClassRecord,
+    } from "$styles/size";
+    import type { ButtonProps } from "./types.js";
+    import { twMerge } from "tailwind-merge";
+    import { getLinkProps } from "../../../utils/link.js";
+    import Loader from "../../feedback/Loader/index.svelte";
+    import { buttonIconSizeStyles, buttonSizeStyles } from "./size.js";
+
+    let {
+        children = undefined,
+        class: className = "",
+        pill = false,
+        icon = false,
+        square = false,
+        href = undefined,
+        color = "primary",
+        variant = "full",
+        disabled = false,
+        external = false,
+        size = "md",
+        radius = "md",
+        loading = false,
+        ...restProps
+    }: ButtonProps = $props();
+
+    const defaultClass =
+        "inline-flex items-center justify-center gap-2 transition-colors duration-300 ease-in-out text-white whitespace-nowrap";
+    const disabledClass = $derived(
+        disabled || loading
+            ? "opacity-50 pointer-events-none"
+            : "cursor-pointer",
+    );
+    const iconClass = $derived(icon ? "p-0 flex-none" : "h-fit");
+    const pillClass = $derived((pill || icon) && "rounded-full");
+    const squareClass = $derived(square && "aspect-square rounded-none");
+
+    const mergedClass = $derived(
+        twMerge(
+            defaultClass,
+            generateColorStyle(color, variant),
+            disabledClass,
+            getSizeStyleClassRecord(
+                size,
+                icon ? buttonIconSizeStyles : buttonSizeStyles,
+            ),
+            getSizeStyleClass(radius, "radius"),
+            iconClass,
+            pillClass,
+            squareClass,
+            className,
+        ),
+    );
+
+    const mergedStyle = $derived(
+        [
+            typeof size === "number"
+                ? icon
+                    ? `height: ${size}px; width: ${size}px; padding: ${size / 4}px`
+                    : `height: ${size}px; padding: ${size / 4}px ${size / 8}px`
+                : "",
+            getSizeStyle(radius, "radius"),
+            restProps.style,
+        ]
+            .filter(Boolean)
+            .join("; "),
+    );
+
+    const anchorProps = $derived(
+        getLinkProps(href, external, disabled || loading),
+    );
+</script>
+
+<svelte:element
+    this={href ? "a" : "button"}
+    class={mergedClass}
+    disabled={disabled || loading}
+    aria-disabled={disabled || loading}
+    type={href ? undefined : restProps.type || "button"}
+    style={mergedStyle}
+    {...anchorProps}
+    {...restProps}
+>
+    {#if loading}
+        <Loader
+            color="white"
+            class="border-2 border-loader-btn-color {getSizeStyleClass(
+                size,
+                'buttonLoader',
+            )}"
+        />
+    {/if}
+    {@render children?.()}
+</svelte:element>

package/dist/components/inputs/Button/index.svelte.d.ts

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

package/dist/components/inputs/Button/size.d.ts

@@ -0,0 +1,3 @@
+import type { SizeStyle } from "$styles/size";
+export declare const buttonSizeStyles: Record<SizeStyle, string>;
+export declare const buttonIconSizeStyles: Record<SizeStyle, string>;

package/dist/components/inputs/Button/size.js

@@ -0,0 +1,28 @@
+export const buttonSizeStyles = {
+    xs: "text-xs h-4 px-1 py-0.5",
+    sm: "text-sm h-6 px-2 py-1",
+    md: "text-base h-8 px-3 py-1.5",
+    lg: "text-lg h-10 px-4 py-2",
+    xl: "text-xl h-12 px-5 py-2.5",
+    "2xl": "text-2xl h-14 px-6 py-3",
+    "3xl": "text-3xl h-16 px-7 py-3.5",
+    "4xl": "text-4xl h-18 px-8 py-4",
+    "5xl": "text-5xl h-20 px-9 py-4.5",
+    "6xl": "text-6xl h-24 px-10 py-5",
+    full: "w-full text-base h-8 px-3 py-1",
+    none: "p-0 h-auto text-base"
+};
+export const buttonIconSizeStyles = {
+    xs: "text-xs h-4 w-4 p-0.5",
+    sm: "text-sm h-6 w-6 p-1",
+    md: "text-base h-8 w-8 p-1.5",
+    lg: "text-lg h-10 w-10 p-2",
+    xl: "text-xl h-12 w-12 p-2.5",
+    "2xl": "text-2xl h-14 w-14 p-3",
+    "3xl": "text-3xl h-16 w-16 p-3.5",
+    "4xl": "text-4xl h-18 w-18 p-4",
+    "5xl": "text-5xl h-20 w-20 p-4.5",
+    "6xl": "text-6xl h-24 w-24 p-5",
+    full: "w-full aspect-square text-base p-1",
+    none: "p-0 h-auto text-base"
+};

package/dist/{types/Button.d.ts → components/inputs/Button/types.d.ts}

@@ -1,13 +1,13 @@
-import type { ColorStyle, ColorStyleType } from "../styles/color.ts";
-import type { SizeStyle } from "../styles/size.ts";
-import type { BaseComponentProps } from "./BaseComponent.ts";
+import type { ColorStyle, ButtonColorStyleType } from "$styles/color.js";
+import type { SizeStyle } from "$styles/size.js";
+import type { BaseComponentProps } from "$types/BaseComponent";
 export interface ButtonProps extends BaseComponentProps {
     pill?: boolean;
     icon?: boolean;
     square?: boolean;
     href?: string;
     color?: ColorStyle;
-    variant?: ColorStyleType;
+    variant?: ButtonColorStyleType;
     disabled?: boolean;
     external?: boolean;
     size?: SizeStyle;

package/dist/components/{Checkbox.svelte → inputs/Checkbox/index.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { twMerge } from "tailwind-merge";
-    import Text from "./Text.svelte";
-    import type { CheckboxProps } from "../types/Checkbox.js";
+    import Text from "../../typography/Text/index.svelte";
+    import type { CheckboxProps } from "./types";
 
     let { 
         children = undefined, 

package/dist/components/inputs/Checkbox/index.svelte.d.ts

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

package/dist/{types/Checkbox.d.ts → components/inputs/Checkbox/types.d.ts}

@@ -1,4 +1,4 @@
-import type { BaseComponentProps } from "./BaseComponent.ts";
+import type { BaseComponentProps } from "$types/BaseComponent";
 export interface CheckboxProps extends BaseComponentProps {
     label?: string;
     labelClass?: string;