@valerius_petrini/corekit-ui 0.1.73 → 0.1.74

package/dist/components/feedback/Modal/index.stories.svelte

@@ -0,0 +1,34 @@
+<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 Modal from "./index.svelte";
+    import { sizeStyles } from "../../../styles/size.js";
+
+	const { Story } = defineMeta({
+		title: "Components/Feedback/Modal",
+		component: Modal,
+		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 Modal</Text>
+    <Text class="mb-4">This is a customizable modal 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/feedback/Modal/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/feedback/Modal/index.svelte

@@ -2,7 +2,8 @@
     import type { ModalProps } from "./types";
     import { fade, fly } from "svelte/transition";
     import Card from "../../display/Card/index.svelte";
-    import { positionParts } from "../../../styles/posititon.js";
+    import { modalPositionParts } from "../../../styles/posititon.js";
+    import { getSizeStyleClass } from "../../../styles/size.js";
     import { twMerge } from "tailwind-merge";
 
     let { 
@@ -11,26 +12,34 @@
         element = $bindable(),
         open = $bindable(), 
         position = "center",
+        size = "md",
         ...restProps
     }: ModalProps = $props();
 
-    const defaultOuterDivClass = "w-full h-screen fixed bg-black/50 z-200 flex items-center justify-center top-0 left-0 p-4";
-    const combinedOuterDivClass = $derived(twMerge(defaultOuterDivClass));
+    const outerClass = $derived(twMerge(
+        "fixed inset-0 z-300 flex flex-col bg-black/50 p-4",
+        modalPositionParts[position]
+    ));
 
-    const defaultInnerDivClass = "z-300 max-h-full absolute";
-    const positionInnerDivClass = $derived(positionParts[position] || "");
-    const combinedInnerDivClass = $derived(twMerge(defaultInnerDivClass, positionInnerDivClass));
-
-    const defaultCardClass = "overflow-y-auto max-h-[95vh]";
-    const combinedCardClass = $derived(twMerge(defaultCardClass, className));
+    const cardClass = $derived(twMerge(
+        "w-full max-h-[95vh] overflow-y-auto",
+        getSizeStyleClass(size, "card"),
+        className
+    ));
 </script>
 
 {#if open}
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class={combinedOuterDivClass} transition:fade={{ duration: 200 }} onclick={() => open = false} bind:this={element}>
-        <div class={combinedInnerDivClass} transition:fly={{ y: -20, duration: 200 }} onclick={(e) => e.stopPropagation()}>
-            <Card class={combinedCardClass} {...restProps}>
+    <div
+        class={outerClass}
+        transition:fade={{ duration: 200 }}
+        onclick={() => open = false}
+        bind:this={element}>
+        <div
+            transition:fly={{ y: -20, duration: 200 }}
+            onclick={(e) => e.stopPropagation()}>
+            <Card class={cardClass} {...restProps}>
                 {@render children()}
             </Card>
         </div>

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

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

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

@@ -0,0 +1,82 @@
+<script module>
+    let count = 0;
+</script>
+
+<script lang="ts">
+    import type { TextareaProps } from "./types";
+    import { twMerge } from "tailwind-merge";
+    import { getSizeStyleClass } from "../../../styles/size.js";
+
+    import BaseInput from "../helper/BaseInput.svelte";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        element = $bindable(),
+        label = "",
+        labelClass = "",
+        divClass = "", 
+        outerDivClass = "",
+        icon = undefined,
+        placeholder = "",
+        value = $bindable(),
+        required = false,
+        disabled = false,
+        size = "md",
+        radius = "md",
+        id = `textarea-${count++}`,
+        ...restProps
+    }: TextareaProps = $props();
+
+    const sizeClasses = $derived(getSizeStyleClass(size, "form"));
+    const labelSizeClass = $derived(getSizeStyleClass(size, "formLabel"));
+
+    const customStyle = $derived.by(() => {
+        const styles: string[] = [];
+
+        if (typeof size === "number")
+            styles.push(`width: ${size}px`);
+
+        if (typeof radius === "number")
+            styles.push(`border-radius: ${radius}px`);
+
+        return styles.join("; ");
+    });
+
+    let defaultClass = "text-main-text w-full outline-none px-1.5 w-full bg-inherit border-0 focus:ring-0 focus-visible:ring-0 rounded-none py-2.5!";
+
+    let combinedClass = $derived(twMerge(defaultClass, sizeClasses, labelSizeClass, className));
+    let combinedDivClass = $derived(twMerge(divClass));
+</script>
+
+<BaseInput
+    {children}
+    {className}
+    {label}
+    {labelClass}
+    divClass={combinedDivClass}
+    {outerDivClass}
+    {value}
+    {required}
+    {disabled}
+    {size}
+    {radius}
+    {id}
+    bind:wrapper={element}
+    {...restProps}>
+
+
+    {#snippet innerDivElement()}
+        <textarea
+            {id}
+            bind:value={value}
+            class={combinedClass}
+            {required}
+            {disabled}
+            placeholder={placeholder}
+            aria-disabled={disabled}
+            style={customStyle}
+            {...restProps}></textarea>
+    {/snippet}
+</BaseInput>
+

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

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

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

@@ -0,0 +1,3 @@
+import type { BaseInputProps } from "../../../types/BaseComponent";
+export interface TextareaProps extends BaseInputProps {
+}

package/dist/components/inputs/Textarea/types.js

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

package/dist/styles/posititon.d.ts

@@ -1,3 +1,4 @@
 export type PositionStyle = "top" | "right" | "bottom" | "left" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center";
 export type TooltipPosition = "top" | "right" | "bottom" | "left";
 export declare const positionParts: Record<PositionStyle, string>;
+export declare const modalPositionParts: Record<PositionStyle, string>;

package/dist/styles/posititon.js

@@ -9,3 +9,14 @@ export const positionParts = {
     "bottom-right": "bottom-4 right-4",
     "center": "top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
 };
+export const modalPositionParts = {
+    "center": "items-center justify-center",
+    "top": "items-center justify-start pt-4",
+    "bottom": "items-center justify-end pb-4",
+    "left": "items-start justify-center pl-4",
+    "right": "items-end justify-center pr-4",
+    "top-left": "items-start justify-start p-4",
+    "top-right": "items-end justify-start p-4",
+    "bottom-left": "items-start justify-end p-4",
+    "bottom-right": "items-end justify-end p-4",
+};

package/package.json

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