fix: remove VariantProps for component data

Author: shinokada

src/lib/alert/Alert.svelte

@@ -72,7 +72,7 @@
 @props:icon: Snippet;
 @props:alertStatus: boolean = $bindable(true);
 @props:closeIcon: boolean;
-@props:color: VariantProps<typeof alert>["color"] = "primary";
+@props:color: "primary" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" = "primary";
 @props:rounded: boolean = true;
 @props:border: boolean;
 @props:class: string;

src/lib/alert/index.ts

@@ -1,11 +1,10 @@
-import { type VariantProps } from "tailwind-variants";
 import type { Snippet } from "svelte";
 import Alert from "./Alert.svelte";
 import type { ParamsType, TransitionFunc } from "../types";
 import type { HTMLAttributes } from "svelte/elements";
 import { alert } from "./theme";
 
-type alertColor = VariantProps<typeof alert>["color"];
+type alertColor = "primary" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 
 interface AlertProps extends HTMLAttributes<HTMLDivElement> {
   children: Snippet;

src/lib/avatar/Avatar.svelte

@@ -44,8 +44,8 @@
 @props:src: string;
 @props:href: string;
 @props:cornerStyle: "rounded" | "circular" = "circular";
-@props:border: any;
-@props:stacked: boolean;
+@props:border: boolean = false;
+@props:stacked: boolean = false;
 @props:dot: object | undefined;
 @props:class: string;
 @props:alt: string;

src/lib/badge/Badge.svelte

@@ -57,7 +57,7 @@
 @props: children: Snippet;
 @props:icon: Snippet;
 @props:badgeStatus: boolean = $bindable(true);
-@props:color: VariantProps<typeof badge>["color"] = "primary";
+@props:color: "primary" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" = "primary";
 @props:large: boolean = false;
 @props:dismissable: boolean = false;
 @props:class: string;

src/lib/badge/index.ts

@@ -1,11 +1,10 @@
-import { type VariantProps } from "tailwind-variants";
 import type { Snippet } from "svelte";
 import type { ParamsType, TransitionFunc } from "../types";
 import type { HTMLAttributes } from "svelte/elements";
 import Badge from "./Badge.svelte";
 import { badge } from "./theme";
 
-type badgeColor = VariantProps<typeof badge>["color"];
+type badgeColor = "primary" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 
 interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
   children: Snippet;

src/lib/banner/Banner.svelte

@@ -48,10 +48,10 @@
 @props: children: Snippet;
 @props:header: Snippet;
 @props:bannerStatus: boolean = $bindable(true);
-@props:position: VariantProps<typeof banner>["position"] = "sticky";
+@props:position: "static" | "fixed" | "absolute" | "relative" | "sticky" = "sticky";
 @props:dismissable: boolean = true;
-@props:color: VariantProps<typeof banner>["color"] = "gray";
-@props:bannerType: VariantProps<typeof banner>["bannerType"] = "default";
+@props:color: "primary" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" = "gray";
+@props:bannerType: "default" | "bottom" | "cta" | "signup" | "info" = "default";
 @props:class: string;
 @props:innerClass: string;
 @props:transition: TransitionFunc = fade;

src/lib/banner/index.ts

@@ -1,13 +1,12 @@
-import { type VariantProps } from "tailwind-variants";
 import type { Snippet } from "svelte";
 import type { TransitionFunc } from "../types";
 import type { HTMLAttributes } from "svelte/elements";
 import Banner from "./Banner.svelte";
 import { banner } from "./theme";
 
-type ColorVariants = VariantProps<typeof banner>["color"];
-type TypeVariants = VariantProps<typeof banner>["bannerType"];
-type PositionVariants = VariantProps<typeof banner>["position"];
+type ColorVariants = "primary" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+type TypeVariants = "default" | "bottom" | "cta" | "signup" | "info";
+type PositionVariants = "static" | "fixed" | "absolute" | "relative" | "sticky";
 
 interface BannerProps extends HTMLAttributes<HTMLDivElement> {
   children: Snippet;

src/lib/banner/theme.ts

@@ -7,13 +7,15 @@ const banner = tv({
   },
   variants: {
     position: {
+      // "static" | "fixed" | "absolute" | "relative" | "sticky"
       static: { base: "static" },
       fixed: { base: "fixed" },
       absolute: { base: "absolute" },
       relative: { base: "relative" },
       sticky: { base: "sticky" }
     },
     bannerType: {
+      // "default" | "bottom" | "cta" | "signup" | "info"
       default: {
         base: "top-0 start-0 w-full border-b border-gray-200 bg-gray-50",
         insideDiv: "mx-auto"

src/lib/bottom-navigation/BottomNav.svelte

@@ -32,8 +32,8 @@
 ## Props
 @props: children: Snippet;
 @props:header: Snippet;
-@props:position: VariantProps<typeof bottomNav>["position"] = "fixed";
-@props:navType: VariantProps<typeof bottomNav>["navType"] = "default";
+@props:position: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined = "fixed";
+@props:navType: "border" | "application" | "group" | "default" | "pagination" | "card" | "meeting" | "video" | undefined = "default";
 @props:outerClass: string;
 @props:innerClass: string;
 @props:activeClass: string;

src/lib/bottom-navigation/BottomNavItem.svelte

@@ -35,7 +35,7 @@
 ## Props
 @props: children: Snippet;
 @props:btnName: string;
-@props:appBtnPosition: AppBtnVariantProps<typeof bottomNav>["position"] = "middle";
+@props:appBtnPosition: AppBtn"static" | "fixed" | "absolute" | "relative" | "sticky" | undefined = "middle";
 @props:target: string;
 @props:activeClass: string;
 @props:href: string = "";