@valerius_petrini/corekit-ui 0.1.66 → 0.1.70
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/actions/toast.svelte.d.ts +1 -1
- package/dist/actions/toast.svelte.js +1 -1
- package/dist/components/display/Card/index.stories.svelte +35 -0
- package/dist/components/display/Card/index.stories.svelte.d.ts +18 -0
- package/dist/components/{Card.svelte → display/Card/index.svelte} +4 -3
- package/dist/components/display/Card/index.svelte.d.ts +4 -0
- package/dist/{types/Card.d.ts → components/display/Card/types.d.ts} +2 -3
- package/dist/components/display/Card/variant.d.ts +2 -0
- package/dist/components/display/KBD/index.stories.svelte +13 -0
- package/dist/components/display/KBD/index.stories.svelte.d.ts +18 -0
- package/dist/components/display/KBD/index.svelte.d.ts +3 -0
- package/dist/components/{Skeleton.svelte → display/Skeleton/index.svelte} +2 -2
- package/dist/components/display/Skeleton/index.svelte.d.ts +4 -0
- package/dist/{types/Skeleton.d.ts → components/display/Skeleton/types.d.ts} +1 -1
- package/dist/components/{Table.svelte → display/Table/index.svelte} +1 -1
- package/dist/components/display/Table/index.svelte.d.ts +4 -0
- package/dist/{types/Table.d.ts → components/display/Table/types.d.ts} +2 -2
- package/dist/components/display/index.d.ts +7 -0
- package/dist/components/display/index.js +4 -0
- package/dist/components/{Loader.svelte → feedback/Loader/index.svelte} +3 -3
- package/dist/components/feedback/Loader/index.svelte.d.ts +4 -0
- package/dist/components/feedback/Loader/types.d.ts +7 -0
- package/dist/components/{Modal.svelte → feedback/Modal/index.svelte} +3 -3
- package/dist/components/feedback/Modal/index.svelte.d.ts +4 -0
- package/dist/components/feedback/Modal/types.d.ts +6 -0
- package/dist/components/{Progress.svelte → feedback/Progress/index.svelte} +3 -3
- package/dist/components/feedback/Progress/index.svelte.d.ts +4 -0
- package/dist/{types/Progress.d.ts → components/feedback/Progress/types.d.ts} +3 -3
- package/dist/components/{Toast.svelte → feedback/Toast/index.svelte} +6 -6
- package/dist/components/feedback/Toast/index.svelte.d.ts +5 -0
- package/dist/{types/Toast.d.ts → components/feedback/Toast/types.d.ts} +3 -3
- package/dist/components/{Toaster.svelte → feedback/Toaster/index.svelte} +3 -3
- package/dist/components/feedback/Toaster/index.svelte.d.ts +3 -0
- package/dist/components/feedback/index.d.ts +9 -0
- package/dist/components/feedback/index.js +5 -0
- package/dist/components/inputs/Button/index.stories.svelte +53 -0
- package/dist/components/inputs/Button/index.stories.svelte.d.ts +18 -0
- package/dist/components/inputs/Button/index.svelte +98 -0
- package/dist/components/inputs/Button/index.svelte.d.ts +4 -0
- package/dist/components/inputs/Button/size.d.ts +3 -0
- package/dist/components/inputs/Button/size.js +28 -0
- package/dist/{types/Button.d.ts → components/inputs/Button/types.d.ts} +4 -4
- package/dist/components/{Checkbox.svelte → inputs/Checkbox/index.svelte} +2 -2
- package/dist/components/inputs/Checkbox/index.svelte.d.ts +4 -0
- package/dist/{types/Checkbox.d.ts → components/inputs/Checkbox/types.d.ts} +1 -1
- package/dist/components/inputs/ColorInput/index.stories.svelte +23 -0
- package/dist/components/inputs/ColorInput/index.stories.svelte.d.ts +18 -0
- package/dist/components/inputs/ColorInput/index.svelte +384 -0
- package/dist/components/inputs/ColorInput/index.svelte.d.ts +4 -0
- package/dist/components/inputs/ColorInput/types.d.ts +16 -0
- package/dist/components/inputs/Combobox/index.stories.svelte +34 -0
- package/dist/components/inputs/Combobox/index.stories.svelte.d.ts +18 -0
- package/dist/components/{Combobox.svelte → inputs/Combobox/index.svelte} +67 -10
- package/dist/components/inputs/Combobox/index.svelte.d.ts +4 -0
- package/dist/components/inputs/Combobox/types.d.ts +8 -0
- package/dist/components/{FileInput.svelte → inputs/FileInput/index.svelte} +4 -4
- package/dist/components/inputs/FileInput/index.svelte.d.ts +4 -0
- package/dist/components/inputs/FileInput/types.d.ts +14 -0
- package/dist/components/inputs/Input/index.stories.svelte +27 -0
- package/dist/components/inputs/Input/index.stories.svelte.d.ts +18 -0
- package/dist/components/{Input.svelte → inputs/Input/index.svelte} +8 -11
- package/dist/components/inputs/Input/index.svelte.d.ts +5 -0
- package/dist/components/inputs/Input/types.d.ts +15 -0
- package/dist/components/inputs/Input/types.js +3 -0
- package/dist/components/{Select.svelte → inputs/Select/index.svelte} +3 -4
- package/dist/components/inputs/Select/index.svelte.d.ts +3 -0
- package/dist/components/inputs/Select/types.d.ts +7 -0
- package/dist/components/inputs/Select/types.js +2 -0
- package/dist/components/{helper → inputs/helper}/BaseInput.svelte +14 -8
- package/dist/components/{helper → inputs/helper}/BaseInput.svelte.d.ts +2 -2
- package/dist/components/{helper → inputs/helper}/NumberInput.svelte +8 -7
- package/dist/components/{helper → inputs/helper}/NumberInput.svelte.d.ts +1 -2
- package/dist/components/inputs/index.d.ts +12 -0
- package/dist/components/inputs/index.js +6 -0
- package/dist/components/navigation/Breadcrumb/BreadcrumbItem.svelte +37 -0
- package/dist/components/navigation/Breadcrumb/BreadcrumbItem.svelte.d.ts +4 -0
- package/dist/components/navigation/Breadcrumb/index.stories.svelte +19 -0
- package/dist/components/navigation/Breadcrumb/index.stories.svelte.d.ts +18 -0
- package/dist/components/navigation/Breadcrumb/index.svelte +21 -0
- package/dist/components/navigation/Breadcrumb/index.svelte.d.ts +4 -0
- package/dist/components/navigation/Breadcrumb/types.d.ts +6 -0
- package/dist/components/{NavbarDropdown.svelte → navigation/Navbar/NavbarDropdown.svelte} +1 -1
- package/dist/components/{NavbarDropdown.svelte.d.ts → navigation/Navbar/NavbarDropdown.svelte.d.ts} +1 -1
- package/dist/components/{NavbarElement.svelte → navigation/Navbar/NavbarElement.svelte} +2 -2
- package/dist/components/{NavbarElement.svelte.d.ts → navigation/Navbar/NavbarElement.svelte.d.ts} +1 -1
- package/dist/components/{NavbarSeparator.svelte → navigation/Navbar/NavbarSeparator.svelte} +1 -1
- package/dist/components/{NavbarSeparator.svelte.d.ts → navigation/Navbar/NavbarSeparator.svelte.d.ts} +1 -1
- package/dist/components/{Navbar.svelte → navigation/Navbar/index.svelte} +1 -2
- package/dist/components/navigation/Navbar/index.svelte.d.ts +4 -0
- package/dist/{types/Navbar.d.ts → components/navigation/Navbar/types.d.ts} +2 -10
- package/dist/{types/Navbar.js → components/navigation/Navbar/types.js} +0 -1
- package/dist/components/{SideNavbar.svelte → navigation/SideNavbar/index.svelte} +3 -3
- package/dist/components/navigation/SideNavbar/index.svelte.d.ts +4 -0
- package/dist/components/navigation/SideNavbar/types.d.ts +10 -0
- package/dist/components/navigation/SideNavbar/types.js +2 -0
- package/dist/components/navigation/index.d.ts +10 -0
- package/dist/components/navigation/index.js +7 -0
- package/dist/components/overlay/Tooltip/index.stories.svelte +20 -0
- package/dist/components/overlay/Tooltip/index.stories.svelte.d.ts +18 -0
- package/dist/components/overlay/Tooltip/index.svelte +193 -0
- package/dist/components/overlay/Tooltip/index.svelte.d.ts +4 -0
- package/dist/components/overlay/Tooltip/types.d.ts +9 -0
- package/dist/components/overlay/Tooltip/types.js +1 -0
- package/dist/components/overlay/index.d.ts +2 -0
- package/dist/components/overlay/index.js +1 -0
- package/dist/components/typography/Text/index.stories.svelte +16 -0
- package/dist/components/typography/Text/index.stories.svelte.d.ts +18 -0
- package/dist/components/{Text.svelte → typography/Text/index.svelte} +10 -10
- package/dist/components/typography/Text/index.svelte.d.ts +4 -0
- package/dist/{types/Text.d.ts → components/typography/Text/types.d.ts} +2 -2
- package/dist/components/typography/Text/types.js +2 -0
- package/dist/components/{Typewriter.svelte → typography/Typewriter/index.svelte} +2 -2
- package/dist/components/typography/Typewriter/index.svelte.d.ts +4 -0
- package/dist/{types/Typewriter.d.ts → components/typography/Typewriter/types.d.ts} +1 -1
- package/dist/components/typography/Typewriter/types.js +2 -0
- package/dist/components/typography/index.d.ts +4 -0
- package/dist/components/typography/index.js +2 -0
- package/dist/components/{Analytics.svelte → utility/Analytics/index.svelte} +1 -1
- package/dist/components/utility/Analytics/index.svelte.d.ts +4 -0
- package/dist/components/utility/Analytics/types.js +1 -0
- package/dist/components/{SEO.svelte → utility/SEO/index.svelte} +1 -1
- package/dist/components/utility/SEO/index.svelte.d.ts +4 -0
- package/dist/components/utility/SEO/types.js +1 -0
- package/dist/components/utility/index.d.ts +4 -0
- package/dist/components/utility/index.js +2 -0
- package/dist/index.d.ts +8 -25
- package/dist/index.js +8 -24
- package/dist/styles/color.d.ts +4 -1
- package/dist/styles/color.js +175 -166
- package/dist/styles/layout.css +38 -2
- package/dist/styles/size.d.ts +3 -1
- package/dist/styles/size.js +19 -39
- package/dist/types/BaseComponent.d.ts +18 -0
- package/dist/utils/color.d.ts +16 -0
- package/dist/utils/color.js +70 -0
- package/package.json +23 -11
- package/dist/components/Analytics.svelte.d.ts +0 -4
- package/dist/components/Button.svelte +0 -66
- package/dist/components/Button.svelte.d.ts +0 -4
- package/dist/components/Card.svelte.d.ts +0 -4
- package/dist/components/Checkbox.svelte.d.ts +0 -4
- package/dist/components/Combobox.svelte.d.ts +0 -4
- package/dist/components/FileInput.svelte.d.ts +0 -4
- package/dist/components/Input.svelte.d.ts +0 -5
- package/dist/components/KBD.svelte.d.ts +0 -3
- package/dist/components/Loader.svelte.d.ts +0 -4
- package/dist/components/Modal.svelte.d.ts +0 -4
- package/dist/components/Navbar.svelte.d.ts +0 -4
- package/dist/components/Progress.svelte.d.ts +0 -4
- package/dist/components/SEO.svelte.d.ts +0 -4
- package/dist/components/Select.svelte.d.ts +0 -4
- package/dist/components/SideNavbar.svelte.d.ts +0 -4
- package/dist/components/Skeleton.svelte.d.ts +0 -4
- package/dist/components/Table.svelte.d.ts +0 -4
- package/dist/components/Text.svelte.d.ts +0 -4
- package/dist/components/Toast.svelte.d.ts +0 -5
- package/dist/components/Toaster.svelte.d.ts +0 -3
- package/dist/components/Tooltip.svelte +0 -123
- package/dist/components/Tooltip.svelte.d.ts +0 -4
- package/dist/components/Typewriter.svelte.d.ts +0 -4
- package/dist/types/Input.d.ts +0 -57
- package/dist/types/Input.js +0 -5
- package/dist/types/Loader.d.ts +0 -5
- package/dist/types/Modal.d.ts +0 -6
- package/dist/types/Tooltip.d.ts +0 -7
- /package/dist/{types/Analytics.js → components/display/Card/types.js} +0 -0
- /package/dist/{types/Card.js → components/display/Card/variant.js} +0 -0
- /package/dist/components/{KBD.svelte → display/KBD/index.svelte} +0 -0
- /package/dist/{types/Button.js → components/display/Skeleton/types.js} +0 -0
- /package/dist/{types/Table.js → components/display/Table/types.js} +0 -0
- /package/dist/{types/Loader.js → components/feedback/Loader/types.js} +0 -0
- /package/dist/{types/Modal.js → components/feedback/Modal/types.js} +0 -0
- /package/dist/{types/Checkbox.js → components/feedback/Progress/types.js} +0 -0
- /package/dist/{types/SEO.js → components/feedback/Toast/types.js} +0 -0
- /package/dist/{types/Skeleton.js → components/inputs/Button/types.js} +0 -0
- /package/dist/{types/Progress.js → components/inputs/Checkbox/types.js} +0 -0
- /package/dist/{types/Text.js → components/inputs/ColorInput/types.js} +0 -0
- /package/dist/{types/Toast.js → components/inputs/Combobox/types.js} +0 -0
- /package/dist/{types/Typewriter.js → components/inputs/FileInput/types.js} +0 -0
- /package/dist/{types/Tooltip.js → components/navigation/Breadcrumb/types.js} +0 -0
- /package/dist/{types/Analytics.d.ts → components/utility/Analytics/types.d.ts} +0 -0
- /package/dist/{types/SEO.d.ts → components/utility/SEO/types.d.ts} +0 -0
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<script module lang="ts">
|
|
2
|
+
import { defineMeta } from "@storybook/addon-svelte-csf";
|
|
3
|
+
import Button from "../../inputs/Button/index.svelte";
|
|
4
|
+
import Text from "../../typography/Text/index.svelte";
|
|
5
|
+
import Card from "./index.svelte";
|
|
6
|
+
import { colorStyles, colorStyleTypes } from "../../../styles/color.js";
|
|
7
|
+
import { sizeStyles } from "../../../styles/size.js";
|
|
8
|
+
|
|
9
|
+
const { Story } = defineMeta({
|
|
10
|
+
title: "Components/Display/Card",
|
|
11
|
+
component: Card,
|
|
12
|
+
argTypes: {
|
|
13
|
+
variant: {
|
|
14
|
+
control: "select",
|
|
15
|
+
options: ["bordered", "elevated"],
|
|
16
|
+
},
|
|
17
|
+
size: {
|
|
18
|
+
control: "select",
|
|
19
|
+
options: sizeStyles,
|
|
20
|
+
},
|
|
21
|
+
radius: {
|
|
22
|
+
control: "select",
|
|
23
|
+
options: sizeStyles,
|
|
24
|
+
},
|
|
25
|
+
href: { control: "text" },
|
|
26
|
+
external: { control: "boolean" },
|
|
27
|
+
},
|
|
28
|
+
});
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<Story name="Default" args={{ variant: "bordered", size: "md" }}>
|
|
32
|
+
<Text tag="h2" class="text-2xl font-bold mb-4">Customizable Card</Text>
|
|
33
|
+
<Text class="mb-4">This is a customizable card component. You can add any content here and style it as needed.</Text>
|
|
34
|
+
<Button href="https://example.com" target="_blank">Learn More</Button>
|
|
35
|
+
</Story>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
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> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
13
|
+
}
|
|
14
|
+
declare const Index: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type Index = InstanceType<typeof Index>;
|
|
18
|
+
export default Index;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { getLinkProps } from "
|
|
3
|
-
import { getSizeStyle, getSizeStyleClass } from "
|
|
4
|
-
import {
|
|
2
|
+
import { getLinkProps } from "../../../utils/link.js";
|
|
3
|
+
import { getSizeStyle, getSizeStyleClass } from "../../../styles/size.js";
|
|
4
|
+
import { type CardProps } from "./types.js";
|
|
5
5
|
import { twMerge } from "tailwind-merge";
|
|
6
|
+
import { cardVariantStyles } from "./variant.js";
|
|
6
7
|
|
|
7
8
|
let {
|
|
8
9
|
children = undefined,
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import type { SizeStyle } from "
|
|
2
|
-
import type { BaseComponentProps } from "
|
|
1
|
+
import type { SizeStyle } from "../../../styles/size";
|
|
2
|
+
import type { BaseComponentProps } from "../../../types/BaseComponent";
|
|
3
3
|
export type CardVariant = "bordered" | "elevated";
|
|
4
|
-
export declare const cardVariantStyles: Record<CardVariant, string>;
|
|
5
4
|
export interface CardProps extends BaseComponentProps {
|
|
6
5
|
href?: string;
|
|
7
6
|
external?: boolean;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<script module lang="ts">
|
|
2
|
+
import { defineMeta } from "@storybook/addon-svelte-csf";
|
|
3
|
+
import KBD from "./index.svelte";
|
|
4
|
+
import { colorStyles, colorStyleTypes } from "../../../styles/color.js";
|
|
5
|
+
import { sizeStyles } from "../../../styles/size.js";
|
|
6
|
+
|
|
7
|
+
const { Story } = defineMeta({
|
|
8
|
+
title: "Components/Display/KBD",
|
|
9
|
+
component: KBD,
|
|
10
|
+
});
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<Story name="Default">Ctrl</Story>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
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> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
13
|
+
}
|
|
14
|
+
declare const Index: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type Index = InstanceType<typeof Index>;
|
|
18
|
+
export default Index;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { getSizeStyleClass } from "
|
|
3
|
-
import type { SkeletonProps } from "
|
|
2
|
+
import { getSizeStyleClass } from "../../../styles/size.js";
|
|
3
|
+
import type { SkeletonProps } from "./types";
|
|
4
4
|
import Image from "@lucide/svelte/icons/image";
|
|
5
5
|
import Play from "@lucide/svelte/icons/play";
|
|
6
6
|
import { twMerge } from "tailwind-merge";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { BaseComponentProps } from "
|
|
1
|
+
import type { BaseComponentProps } from "../../../types/BaseComponent";
|
|
2
2
|
export type SkeletonVariant = "default" | "text" | "image" | "video" | "card";
|
|
3
3
|
export interface SkeletonProps extends BaseComponentProps {
|
|
4
4
|
variant?: SkeletonVariant;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { SizeStyle } from "
|
|
2
|
-
import type { BaseComponentProps } from "
|
|
1
|
+
import type { SizeStyle } from "../../../styles/size.js";
|
|
2
|
+
import type { BaseComponentProps } from "../../../types/BaseComponent.ts";
|
|
3
3
|
export interface TableHeaders {
|
|
4
4
|
key: string;
|
|
5
5
|
label: string;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { default as Card } from "./Card/index.svelte";
|
|
2
|
+
export { default as Table } from "./Table/index.svelte";
|
|
3
|
+
export { default as KBD } from "./KBD/index.svelte";
|
|
4
|
+
export { default as Skeleton } from "./Skeleton/index.svelte";
|
|
5
|
+
export type { CardProps } from "./Card/types.ts";
|
|
6
|
+
export type { TableProps } from "./Table/types.ts";
|
|
7
|
+
export type { SkeletonProps } from "./Skeleton/types.ts";
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { getSizeStyleClass } from "
|
|
2
|
+
import { getSizeStyleClass } from "../../../styles/size.js";
|
|
3
3
|
import { twMerge } from "tailwind-merge";
|
|
4
|
-
import type { LoaderProps } from "
|
|
5
|
-
import { generateColorStyle } from "
|
|
4
|
+
import type { LoaderProps } from "./types.js";
|
|
5
|
+
import { generateColorStyle } from "../../../styles/color.js";
|
|
6
6
|
|
|
7
7
|
let {
|
|
8
8
|
class: className = "",
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ColorStyle } from "../../../styles/color";
|
|
2
|
+
import type { SizeStyle } from "../../../styles/size";
|
|
3
|
+
import type { BaseComponentProps } from "../../../types/BaseComponent.ts";
|
|
4
|
+
export interface LoaderProps extends BaseComponentProps {
|
|
5
|
+
size?: SizeStyle;
|
|
6
|
+
color?: ColorStyle;
|
|
7
|
+
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import type { ModalProps } from "
|
|
2
|
+
import type { ModalProps } from "./types";
|
|
3
3
|
import { fade, fly } from "svelte/transition";
|
|
4
|
-
import Card from "
|
|
5
|
-
import { positionParts } from "
|
|
4
|
+
import Card from "../../display/Card/index.svelte";
|
|
5
|
+
import { positionParts } from "../../../styles/posititon.js";
|
|
6
6
|
import { twMerge } from "tailwind-merge";
|
|
7
7
|
|
|
8
8
|
let {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { onMount } from "svelte";
|
|
3
|
-
import type { ProgressProps } from "
|
|
3
|
+
import type { ProgressProps } from "./types.js";
|
|
4
4
|
import { twMerge } from "tailwind-merge";
|
|
5
|
-
import { colorStyleParts } from "
|
|
6
|
-
import { sizeStyleParts, type SizeStyleTheme } from "
|
|
5
|
+
import { colorStyleParts } from "../../../styles/color.js";
|
|
6
|
+
import { sizeStyleParts, type SizeStyleTheme } from "../../../styles/size.js";
|
|
7
7
|
|
|
8
8
|
let {
|
|
9
9
|
children = undefined,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { ColorStyle } from "
|
|
2
|
-
import type { SizeStyle } from "
|
|
3
|
-
import type { BaseComponentProps } from "
|
|
1
|
+
import type { ColorStyle } from "../../../styles/color.ts";
|
|
2
|
+
import type { SizeStyle } from "../../../styles/size.ts";
|
|
3
|
+
import type { BaseComponentProps } from "../../../types/BaseComponent.ts";
|
|
4
4
|
interface AnimateProps {
|
|
5
5
|
from: number;
|
|
6
6
|
to: number;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { twMerge } from "tailwind-merge";
|
|
3
|
-
import type { ToastProps } from "
|
|
4
|
-
import Text from "
|
|
5
|
-
import Progress from "
|
|
3
|
+
import type { ToastProps } from "./types.js";
|
|
4
|
+
import Text from "../../typography/Text/index.svelte";
|
|
5
|
+
import Progress from "../Progress/index.svelte";
|
|
6
6
|
import type { Component } from "svelte";
|
|
7
7
|
|
|
8
8
|
import CircleCheck from "@lucide/svelte/icons/circle-check";
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
import X from "@lucide/svelte/icons/x";
|
|
11
11
|
import Info from "@lucide/svelte/icons/info";
|
|
12
12
|
import TriangleAlert from "@lucide/svelte/icons/triangle-alert";
|
|
13
|
-
import { colorStyleParts, type ColorStyle } from "
|
|
14
|
-
import Button from "
|
|
15
|
-
import { getSizeStyleClass } from "
|
|
13
|
+
import { colorStyleParts, type ColorStyle } from "../../../styles/color.js";
|
|
14
|
+
import Button from "../../inputs/Button/index.svelte";
|
|
15
|
+
import { getSizeStyleClass } from "../../../styles/size.js";
|
|
16
16
|
import { fly } from "svelte/transition";
|
|
17
17
|
import { backOut } from "svelte/easing";
|
|
18
18
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { PositionStyle } from "
|
|
2
|
-
import type { SizeStyle } from "
|
|
3
|
-
import type { BaseComponentProps } from "
|
|
1
|
+
import type { PositionStyle } from "../../../styles/posititon.js";
|
|
2
|
+
import type { SizeStyle } from "../../../styles/size.js";
|
|
3
|
+
import type { BaseComponentProps } from "../../../types/BaseComponent.ts";
|
|
4
4
|
export type ToastType = "success" | "error" | "info" | "warning";
|
|
5
5
|
export interface ToastProps extends BaseComponentProps {
|
|
6
6
|
message: string;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { positionParts, type PositionStyle } from "
|
|
2
|
+
import { positionParts, type PositionStyle } from "../../../styles/posititon.js";
|
|
3
3
|
import { flip } from "svelte/animate";
|
|
4
|
-
import { toastState, toast } from "
|
|
5
|
-
import Toast from "
|
|
4
|
+
import { toastState, toast } from "../../../actions/toast.svelte.js";
|
|
5
|
+
import Toast from "../Toast/index.svelte";
|
|
6
6
|
|
|
7
7
|
const getItems = $derived((pos: PositionStyle) => {
|
|
8
8
|
return toastState.items.filter(i => (i.position ?? 'top-right') === pos);
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { default as Loader } from "./Loader/index.svelte";
|
|
2
|
+
export { default as Modal } from "./Modal/index.svelte";
|
|
3
|
+
export { default as Progress } from "./Progress/index.svelte";
|
|
4
|
+
export { default as Toast } from "./Toast/index.svelte";
|
|
5
|
+
export { default as Toaster } from "./Toaster/index.svelte";
|
|
6
|
+
export type { LoaderProps } from "./Loader/types.ts";
|
|
7
|
+
export type { ModalProps } from "./Modal/types.ts";
|
|
8
|
+
export type { ProgressProps } from "./Progress/types.ts";
|
|
9
|
+
export type { ToastProps } from "./Toast/types.ts";
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { default as Loader } from "./Loader/index.svelte";
|
|
2
|
+
export { default as Modal } from "./Modal/index.svelte";
|
|
3
|
+
export { default as Progress } from "./Progress/index.svelte";
|
|
4
|
+
export { default as Toast } from "./Toast/index.svelte";
|
|
5
|
+
export { default as Toaster } from "./Toaster/index.svelte";
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<script module lang="ts">
|
|
2
|
+
import { defineMeta } from "@storybook/addon-svelte-csf";
|
|
3
|
+
import Button from "./index.svelte";
|
|
4
|
+
import { colorStyles, colorStyleTypes } from "../../../styles/color.js";
|
|
5
|
+
import { sizeStyles } from "../../../styles/size.js";
|
|
6
|
+
|
|
7
|
+
const { Story } = defineMeta({
|
|
8
|
+
title: "Components/Inputs/Button",
|
|
9
|
+
component: Button,
|
|
10
|
+
argTypes: {
|
|
11
|
+
color: {
|
|
12
|
+
control: "select",
|
|
13
|
+
options: colorStyles,
|
|
14
|
+
},
|
|
15
|
+
variant: {
|
|
16
|
+
control: "select",
|
|
17
|
+
options: colorStyleTypes,
|
|
18
|
+
},
|
|
19
|
+
size: {
|
|
20
|
+
control: "select",
|
|
21
|
+
options: sizeStyles,
|
|
22
|
+
},
|
|
23
|
+
radius: {
|
|
24
|
+
control: "select",
|
|
25
|
+
options: sizeStyles,
|
|
26
|
+
},
|
|
27
|
+
disabled: { control: "boolean" },
|
|
28
|
+
loading: { control: "boolean" },
|
|
29
|
+
pill: { control: "boolean" },
|
|
30
|
+
icon: { control: "boolean" },
|
|
31
|
+
square: { control: "boolean" },
|
|
32
|
+
href: { control: "text" },
|
|
33
|
+
external: { control: "boolean" },
|
|
34
|
+
},
|
|
35
|
+
});
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<Story name="Default" args={{ color: "primary", size: "md" }}>Click me</Story>
|
|
39
|
+
|
|
40
|
+
<Story name="Disabled" args={{ color: "primary", disabled: true }}>
|
|
41
|
+
Disabled
|
|
42
|
+
</Story>
|
|
43
|
+
|
|
44
|
+
<Story name="Loading" args={{ color: "primary", loading: true }}>Loading</Story>
|
|
45
|
+
|
|
46
|
+
<Story name="Pill" args={{ color: "primary", pill: true }}>Pill Button</Story>
|
|
47
|
+
|
|
48
|
+
<Story
|
|
49
|
+
name="As Link"
|
|
50
|
+
args={{ color: "primary", href: "https://example.com", external: true }}
|
|
51
|
+
>
|
|
52
|
+
Go somewhere
|
|
53
|
+
</Story>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
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> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
13
|
+
}
|
|
14
|
+
declare const Index: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type Index = InstanceType<typeof Index>;
|
|
18
|
+
export default Index;
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { generateColorStyle } from "../../../styles/color";
|
|
3
|
+
import {
|
|
4
|
+
getSizeStyle,
|
|
5
|
+
getSizeStyleClass,
|
|
6
|
+
getSizeStyleClassRecord,
|
|
7
|
+
} from "../../../styles/size";
|
|
8
|
+
import type { ButtonProps } from "./types.js";
|
|
9
|
+
import { twMerge } from "tailwind-merge";
|
|
10
|
+
import { getLinkProps } from "../../../utils/link.js";
|
|
11
|
+
import Loader from "../../feedback/Loader/index.svelte";
|
|
12
|
+
import { buttonIconSizeStyles, buttonSizeStyles } from "./size.js";
|
|
13
|
+
|
|
14
|
+
let {
|
|
15
|
+
children = undefined,
|
|
16
|
+
class: className = "",
|
|
17
|
+
pill = false,
|
|
18
|
+
icon = false,
|
|
19
|
+
square = false,
|
|
20
|
+
href = undefined,
|
|
21
|
+
color = "primary",
|
|
22
|
+
variant = "full",
|
|
23
|
+
disabled = false,
|
|
24
|
+
external = false,
|
|
25
|
+
size = "md",
|
|
26
|
+
radius = "md",
|
|
27
|
+
loading = false,
|
|
28
|
+
...restProps
|
|
29
|
+
}: ButtonProps = $props();
|
|
30
|
+
|
|
31
|
+
const defaultClass =
|
|
32
|
+
"inline-flex items-center justify-center gap-2 transition-colors duration-300 ease-in-out text-white whitespace-nowrap";
|
|
33
|
+
const disabledClass = $derived(
|
|
34
|
+
disabled || loading
|
|
35
|
+
? "opacity-50 pointer-events-none"
|
|
36
|
+
: "cursor-pointer",
|
|
37
|
+
);
|
|
38
|
+
const iconClass = $derived(icon ? "p-0 flex-none" : "h-fit");
|
|
39
|
+
const pillClass = $derived((pill || icon) && "rounded-full");
|
|
40
|
+
const squareClass = $derived(square && "aspect-square rounded-none");
|
|
41
|
+
|
|
42
|
+
const mergedClass = $derived(
|
|
43
|
+
twMerge(
|
|
44
|
+
defaultClass,
|
|
45
|
+
generateColorStyle(color, variant),
|
|
46
|
+
disabledClass,
|
|
47
|
+
getSizeStyleClassRecord(
|
|
48
|
+
size,
|
|
49
|
+
icon ? buttonIconSizeStyles : buttonSizeStyles,
|
|
50
|
+
),
|
|
51
|
+
getSizeStyleClass(radius, "radius"),
|
|
52
|
+
iconClass,
|
|
53
|
+
pillClass,
|
|
54
|
+
squareClass,
|
|
55
|
+
className,
|
|
56
|
+
),
|
|
57
|
+
);
|
|
58
|
+
|
|
59
|
+
const mergedStyle = $derived(
|
|
60
|
+
[
|
|
61
|
+
typeof size === "number"
|
|
62
|
+
? icon
|
|
63
|
+
? `height: ${size}px; width: ${size}px; padding: ${size / 4}px`
|
|
64
|
+
: `height: ${size}px; padding: ${size / 4}px ${size / 8}px`
|
|
65
|
+
: "",
|
|
66
|
+
getSizeStyle(radius, "radius"),
|
|
67
|
+
restProps.style,
|
|
68
|
+
]
|
|
69
|
+
.filter(Boolean)
|
|
70
|
+
.join("; "),
|
|
71
|
+
);
|
|
72
|
+
|
|
73
|
+
const anchorProps = $derived(
|
|
74
|
+
getLinkProps(href, external, disabled || loading),
|
|
75
|
+
);
|
|
76
|
+
</script>
|
|
77
|
+
|
|
78
|
+
<svelte:element
|
|
79
|
+
this={href ? "a" : "button"}
|
|
80
|
+
class={mergedClass}
|
|
81
|
+
disabled={disabled || loading}
|
|
82
|
+
aria-disabled={disabled || loading}
|
|
83
|
+
type={href ? undefined : restProps.type || "button"}
|
|
84
|
+
style={mergedStyle}
|
|
85
|
+
{...anchorProps}
|
|
86
|
+
{...restProps}
|
|
87
|
+
>
|
|
88
|
+
{#if loading}
|
|
89
|
+
<Loader
|
|
90
|
+
color="white"
|
|
91
|
+
class="border-2 border-loader-btn-color {getSizeStyleClass(
|
|
92
|
+
size,
|
|
93
|
+
'buttonLoader',
|
|
94
|
+
)}"
|
|
95
|
+
/>
|
|
96
|
+
{/if}
|
|
97
|
+
{@render children?.()}
|
|
98
|
+
</svelte:element>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export const buttonSizeStyles = {
|
|
2
|
+
xs: "text-xs h-4 px-1 py-0.5",
|
|
3
|
+
sm: "text-sm h-6 px-2 py-1",
|
|
4
|
+
md: "text-base h-8 px-3 py-1.5",
|
|
5
|
+
lg: "text-lg h-10 px-4 py-2",
|
|
6
|
+
xl: "text-xl h-12 px-5 py-2.5",
|
|
7
|
+
"2xl": "text-2xl h-14 px-6 py-3",
|
|
8
|
+
"3xl": "text-3xl h-16 px-7 py-3.5",
|
|
9
|
+
"4xl": "text-4xl h-18 px-8 py-4",
|
|
10
|
+
"5xl": "text-5xl h-20 px-9 py-4.5",
|
|
11
|
+
"6xl": "text-6xl h-24 px-10 py-5",
|
|
12
|
+
full: "w-full text-base h-8 px-3 py-1",
|
|
13
|
+
none: "p-0 h-auto text-base"
|
|
14
|
+
};
|
|
15
|
+
export const buttonIconSizeStyles = {
|
|
16
|
+
xs: "text-xs h-4 w-4 p-0.5",
|
|
17
|
+
sm: "text-sm h-6 w-6 p-1",
|
|
18
|
+
md: "text-base h-8 w-8 p-1.5",
|
|
19
|
+
lg: "text-lg h-10 w-10 p-2",
|
|
20
|
+
xl: "text-xl h-12 w-12 p-2.5",
|
|
21
|
+
"2xl": "text-2xl h-14 w-14 p-3",
|
|
22
|
+
"3xl": "text-3xl h-16 w-16 p-3.5",
|
|
23
|
+
"4xl": "text-4xl h-18 w-18 p-4",
|
|
24
|
+
"5xl": "text-5xl h-20 w-20 p-4.5",
|
|
25
|
+
"6xl": "text-6xl h-24 w-24 p-5",
|
|
26
|
+
full: "w-full aspect-square text-base p-1",
|
|
27
|
+
none: "p-0 h-auto text-base"
|
|
28
|
+
};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import type { ColorStyle,
|
|
2
|
-
import type { SizeStyle } from "
|
|
3
|
-
import type { BaseComponentProps } from "
|
|
1
|
+
import type { ColorStyle, ButtonColorStyleType } from "../../../styles/color.js";
|
|
2
|
+
import type { SizeStyle } from "../../../styles/size.js";
|
|
3
|
+
import type { BaseComponentProps } from "../../../types/BaseComponent";
|
|
4
4
|
export interface ButtonProps extends BaseComponentProps {
|
|
5
5
|
pill?: boolean;
|
|
6
6
|
icon?: boolean;
|
|
7
7
|
square?: boolean;
|
|
8
8
|
href?: string;
|
|
9
9
|
color?: ColorStyle;
|
|
10
|
-
variant?:
|
|
10
|
+
variant?: ButtonColorStyleType;
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
external?: boolean;
|
|
13
13
|
size?: SizeStyle;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { twMerge } from "tailwind-merge";
|
|
3
|
-
import Text from "
|
|
4
|
-
import type { CheckboxProps } from "
|
|
3
|
+
import Text from "../../typography/Text/index.svelte";
|
|
4
|
+
import type { CheckboxProps } from "./types";
|
|
5
5
|
|
|
6
6
|
let {
|
|
7
7
|
children = undefined,
|