@valerius_petrini/corekit-ui 0.1.54 → 0.1.56

package/dist/components/Card.svelte

@@ -37,7 +37,7 @@
     });
 
     let defaultClass = "text-main-text rounded-lg transition-colors ease-in-out bg-sub-background p-4";
-    let linkClass = "hover:bg-sub-background-hover cursor-pointer";
+    let linkClass = "block hover:bg-sub-background-hover cursor-pointer";
     let combinedClass = $derived(twMerge(
         defaultClass, 
         href ? linkClass : "",

package/dist/components/{FloatingInput.svelte → Input.svelte}

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { FloatingInputProps } from "../types/FloatingInput.js";
+    import type { InputProps } from "../types/Input.js";
     import { twMerge } from "tailwind-merge";
     import Text from "./Text.svelte";
     import { sizeStyleParts, type SizeStyleTheme } from "../styles/size.js";
@@ -11,6 +11,8 @@
     import Phone from "@lucide/svelte/icons/phone";
     import Eye from "@lucide/svelte/icons/eye";
     import EyeOff from "@lucide/svelte/icons/eye-off";
+    import ChevronUp from "@lucide/svelte/icons/chevron-up";
+    import ChevronDown from "@lucide/svelte/icons/chevron-down";
 
     let { 
         children = undefined, 
@@ -30,8 +32,13 @@
         size = "md",
         radius = "md",
         id = crypto.randomUUID(),
+        min = undefined,
+        max = undefined,
+        step = undefined,
         ...restProps
-    }: FloatingInputProps = $props();
+    }: InputProps = $props();
+
+    let isHovered = $state(false);
 
     const sizeParts = $derived(typeof size === "string" ? sizeStyleParts[size as SizeStyleTheme] : null);
     const radiusParts = $derived(typeof radius === "string" ? sizeStyleParts[radius as SizeStyleTheme] : null);
@@ -93,7 +100,7 @@
     const lifted = $derived(isFloating && (isFocused || hasContent));
 
     const Icon = $derived(icon ?? ({
-        mail: Mail, password: Lock, tel: Phone
+        email: Mail, password: Lock, tel: Phone
     }[restProps.type as string] as Component ?? null));
 
     let defaultClass = "text-main-text w-full rounded outline-none px-1.5 w-full bg-inherit border-0 focus:ring-0 focus-visible:ring-0";
@@ -137,6 +144,44 @@
     let combinedOuterDivClass = $derived(twMerge("flex flex-col bg-transparent border-0 p-0", divSizeClass, divFullClass, divClass, disabledClass));
 
     let EyeComponent = $derived(canSeePassword ? Eye : EyeOff);
+
+    let numberIconClass = $derived(twMerge(iconClass, sizeClasses, "text-sub-text/70 w-fit aspect-auto p-0 flex-center flex-col transition-all duration-150"));
+    let numberButtonClass = $derived(twMerge(iconContainerClass, "h-1/2 gap-0 px-0.5 hover:bg-form-border aspect-square rounded-none"));
+
+    function increment() {
+        if (max === undefined || value < max) value = (value || 0) + (step || 1);
+    }
+
+    function decrement() {
+        if (min === undefined || value > min) value = (value || 0) - (step || 1);
+    }
+
+    let incrementInterval: ReturnType<typeof setInterval> | null = null;
+    let decrementInterval: ReturnType<typeof setInterval> | null = null;
+
+    function startIncrement() {
+        increment();
+        incrementInterval = setInterval(increment, 100);
+    }
+
+    function stopIncrement() {
+        if (incrementInterval) {
+            clearInterval(incrementInterval);
+            incrementInterval = null;
+        }
+    }
+
+    function startDecrement() {
+        decrement();
+        decrementInterval = setInterval(decrement, 100);
+    }
+
+    function stopDecrement() {
+        if (decrementInterval) {
+            clearInterval(decrementInterval);
+            decrementInterval = null;
+        }
+    }
 </script>
 
 {#snippet labelElement()}
@@ -149,7 +194,8 @@
 {/snippet}
 
 {#snippet innerDivElement()}
-    <div class={combinedDivClass}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class={combinedDivClass} onmouseenter={() => isHovered = true} onmouseleave={() => isHovered = false}>
         {#if Icon}
             <div class={iconContainerClass}>
                 <Icon class={iconClass}></Icon>
@@ -166,6 +212,9 @@
             class={combinedClass}
             {required}
             {disabled}
+            {min}
+            {max}
+            {step}
             placeholder={variant === "floating" ? "" : placeholder}
             aria-disabled={disabled}
             style={customStyle}
@@ -176,6 +225,27 @@
             <Button class={iconContainerClass} onclick={() => { canSeePassword = !canSeePassword; }}>
                 <EyeComponent class={iconClass}></EyeComponent>
             </Button>
+        {:else if restProps.type === "number"}
+            <div class={twMerge(numberIconClass, isHovered ? "opacity-100 scale-100" : "opacity-0 scale-75")}>
+                <Button 
+                    size="none" radius="none" 
+                    class={numberButtonClass} 
+                    onmousedown={startIncrement}
+                    onmouseup={stopIncrement}
+                    onmouseleave={stopIncrement}
+                    disabled={max !== undefined && value >= max}>
+                    <ChevronUp class="w-full h-full"/>
+                </Button>
+                <Button 
+                    size="none" radius="none" 
+                    class={numberButtonClass} 
+                    onmousedown={startDecrement}
+                    onmouseup={stopDecrement}
+                    onmouseleave={stopDecrement}
+                    disabled={min !== undefined && value <= min}>
+                    <ChevronDown class="w-full h-full"/>
+                </Button>
+            </div>
         {/if}
     </div>
 {/snippet}

package/dist/components/Input.svelte.d.ts

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

package/dist/components/Modal.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import type { ModalProps } from "../types/Modal.js";
+    import { fade, fly } from "svelte/transition";
+    import Card from "./Card.svelte";
+    import { positionParts } from "../styles/posititon.js";
+    import { twMerge } from "tailwind-merge";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        open = $bindable(), 
+        position = "center",
+        ...restProps
+    }: ModalProps = $props();
+
+    const defaultOuterDivClass = "w-full h-screen absolute bg-black/50 z-200 flex items-center justify-center top-0 left-0 p-4";
+    const positionOuterDivClass = $derived(positionParts[position] || "");
+    const combinedOuterDivClass = $derived(twMerge(defaultOuterDivClass, positionOuterDivClass));
+
+    const defaultInnerDivClass = "z-300 max-h-full";
+
+    const defaultCardClass = "overflow-y-auto max-h-[95vh]";
+    const combinedCardClass = $derived(twMerge(defaultCardClass, 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}>
+        <div class={defaultInnerDivClass} transition:fly={{ y: -20, duration: 200 }} onclick={(e) => e.stopPropagation()}>
+            <Card class={combinedCardClass} {...restProps}>
+                {@render children()}
+            </Card>
+        </div>
+    </div>
+{/if}

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

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

package/dist/components/Progress.svelte

@@ -52,6 +52,7 @@
 
     let combinedInnerClass = $derived(twMerge(
         "h-full",
+        sizeClasses,
         colorStyleParts[color]?.base,
         className
     ))

package/dist/components/{FloatingSelect.svelte → Select.svelte}

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { FloatingSelectProps } from "../types/FloatingSelect.js";
+    import type { SelectProps } from "../types/Select.js";
     import { twMerge } from "tailwind-merge";
     import Text from "./Text.svelte";
 
@@ -13,7 +13,7 @@
         options = [],
         id = crypto.randomUUID(),
         ...restProps
-    }: FloatingSelectProps = $props();
+    }: SelectProps = $props();
 
     let defaultSelectClass = "cursor-pointer bg-form-background border-[1px] border-form-border text-main-text z-20 w-full rounded px-1 pt-4 pb-1 text-xs outline-none focus:ring-2 focus:ring-blue-500 transition-all";
     let defaultLabelClass = "block text-sub-text rounded-md text-sm font-medium mb-1 absolute transition-all duration-100 pointer-events-none";

package/dist/components/Select.svelte.d.ts

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

package/dist/components/Table.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import type { TableProps } from "../types/Table.js";
+    import { twMerge } from "tailwind-merge";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        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-form-background";
+
+    const combinedTableClass = $derived(twMerge(
+        defaultTableClass,
+        className
+    ));
+
+    const combinedTableHeaderClass = $derived(twMerge(defaultTableHeaderClass, defaultTableCellClass));
+</script>
+
+<div class="overflow-auto w-full">
+    <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 row as cell}
+                        <td class={defaultTableCellClass}>{cell}</td>
+                    {/each}
+                </tr>
+            {/each}
+        </tbody>
+    </table>
+</div>

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

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

package/dist/index.d.ts

@@ -5,11 +5,12 @@ export { default as SEO } from "./components/SEO.svelte";
 export { default as Navbar } from "./components/Navbar.svelte";
 export { default as NavbarSeparator } from "./components/NavbarSeparator.svelte";
 export { default as NavbarElement } from "./components/NavbarElement.svelte";
-export { default as FloatingInput } from "./components/FloatingInput.svelte";
-export { default as FloatingSelect } from "./components/FloatingSelect.svelte";
+export { default as Input } from "./components/Input.svelte";
+export { default as Select } from "./components/Select.svelte";
 export { default as Text } from "./components/Text.svelte";
 export { default as Card } from "./components/Card.svelte";
 export { default as Checkbox } from "./components/Checkbox.svelte";
 export { default as Progress } from "./components/Progress.svelte";
+export { default as Modal } from "./components/Modal.svelte";
 export { fbmBackground } from "./actions/fbm.ts";
 export type { TypewriterAction, DisplaySegment } from "./types/Typewriter.ts";

package/dist/index.js

@@ -5,10 +5,11 @@ export { default as SEO } from "./components/SEO.svelte";
 export { default as Navbar } from "./components/Navbar.svelte";
 export { default as NavbarSeparator } from "./components/NavbarSeparator.svelte";
 export { default as NavbarElement } from "./components/NavbarElement.svelte";
-export { default as FloatingInput } from "./components/FloatingInput.svelte";
-export { default as FloatingSelect } from "./components/FloatingSelect.svelte";
+export { default as Input } from "./components/Input.svelte";
+export { default as Select } from "./components/Select.svelte";
 export { default as Text } from "./components/Text.svelte";
 export { default as Card } from "./components/Card.svelte";
 export { default as Checkbox } from "./components/Checkbox.svelte";
 export { default as Progress } from "./components/Progress.svelte";
+export { default as Modal } from "./components/Modal.svelte";
 export { fbmBackground } from "./actions/fbm.js";

package/dist/styles/layout.css

@@ -43,10 +43,43 @@ html.dark {
     --vpcui-sub-text: #A0A0A0;
     --vpcui-contrast-text: #111;
     --vpcui-form-background: #2A2A2A;
-    --vpcui-form-border: #3A3A3A;
+    --vpcui-form-border: #4A4A4A;
     --vpcui-navbar-element-hover-background: var(--color-zinc-900);
 }
 
 html {
     background-color: var(--color-main-background);
+}
+
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-sub-background-hover) transparent;
+}
+
+*::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+    background-color: var(--color-sub-background-hover);
+    border-radius: 999px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-main-text);
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type="number"] {
+    -moz-appearance: textfield;
 }

package/dist/styles/posititon.d.ts

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

package/dist/styles/posititon.js

@@ -0,0 +1,11 @@
+export const positionParts = {
+    "top": "flex items-start justify-center",
+    "right": "flex items-center justify-end",
+    "bottom": "flex items-end justify-center",
+    "left": "flex items-center justify-start",
+    "top-left": "flex items-start justify-start",
+    "top-right": "flex items-start justify-end",
+    "bottom-left": "flex items-end justify-start",
+    "bottom-right": "flex items-end justify-end",
+    "center": "flex-center"
+};

package/dist/types/Button.d.ts

@@ -1,6 +1,7 @@
+import type { HTMLButtonAttributes } from "svelte/elements";
 import type { ColorStyle, ColorStyleType } from "../styles/color.ts";
 import type { SizeStyle } from "../styles/size.ts";
-export interface ButtonProps {
+export interface ButtonProps extends Omit<HTMLButtonAttributes, 'size'> {
     children?: any;
     class?: string;
     pill?: boolean;

package/dist/types/Card.d.ts

@@ -1,7 +1,8 @@
+import type { HTMLAttributes } from "svelte/elements";
 import type { SizeStyle } from "../styles/size.ts";
 export type CardVariant = "bordered" | "elevated";
 export declare const cardVariantStyles: Record<CardVariant, string>;
-export interface CardProps {
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size'> {
     children?: any;
     class?: string;
     href?: string;

package/dist/types/{FloatingInput.d.ts → Input.d.ts}

@@ -1,7 +1,8 @@
 import type { Component } from "svelte";
 import type { SizeStyle } from "../styles/size.ts";
+import type { HTMLInputAttributes } from "svelte/elements";
 export type InputVariant = "default" | "floating";
-export interface FloatingInputProps {
+export interface InputProps extends Omit<HTMLInputAttributes, 'size'> {
     children?: any;
     class?: string;
     label?: string;
@@ -13,6 +14,9 @@ export interface FloatingInputProps {
     disabled?: boolean;
     variant?: InputVariant;
     placeholder?: string;
+    min?: number;
+    max?: number;
+    step?: number;
     onfocus?: (e?: FocusEvent) => void;
     onblur?: (e?: FocusEvent) => void;
     validInputRegex?: RegExp;

package/dist/types/Modal.d.ts

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

package/dist/types/Modal.js

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

package/dist/types/{FloatingSelect.d.ts → Select.d.ts}

@@ -1,4 +1,4 @@
-export interface FloatingSelectProps {
+export interface SelectProps {
     children?: any;
     class?: string;
     label?: string;

package/dist/types/Table.d.ts

@@ -0,0 +1,14 @@
+import type { SizeStyle } from "../styles/size.js";
+export interface TableHeaders {
+    key: string;
+    label: string;
+}
+export interface TableProps {
+    children?: any;
+    class?: string;
+    tableHeaders?: TableHeaders[];
+    tableData?: any[];
+    size?: SizeStyle;
+    radius?: SizeStyle;
+    [key: string]: any;
+}

package/dist/types/Table.js

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

package/package.json

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

package/dist/components/FloatingInput.svelte.d.ts

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

package/dist/components/FloatingSelect.svelte.d.ts

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