fix: update class names

Author: shinokada

src/lib/banner/Banner.svelte

@@ -37,7 +37,7 @@
   }: Props = $props();
 
   let bannerStatus = $state(true);
-  $inspect('bannerStatus: ', bannerStatus);
+  // $inspect('bannerStatus: ', bannerStatus);
   const divClasses = {
     default: 'top-0 start-0 w-full border-b border-gray-200 bg-gray-50',
     bottom: 'bottom-0 start-0 w-full border-t border-gray-200 bg-gray-50',

src/lib/cards/Card.svelte

@@ -57,7 +57,7 @@
   // let tag = href ? 'a' : 'div';
   let imgClass: string = $state('');
   // $inspect('href: ', href)
-  $inspect('shadow: ', shadow)
+  // $inspect('shadow: ', shadow)
   $effect(() => {
     innerPadding = paddings[padding];
     cardClass = twMerge(

src/lib/rating/Heart.svelte

@@ -9,7 +9,7 @@
     ariaLabel?: string;
     id?: string;
     role?: string;
-    svgclass?: string;
+    svgClass?: string;
   }
 
   let {
@@ -20,7 +20,7 @@
     ariaLabel = 'heart',
     id = idGenerator(),
     role = 'img',
-    svgclass,
+    svgClass,
     ...attributes
   }: Props = $props();
   
@@ -29,7 +29,7 @@
 <svg
   width={size}
   height={size}
-  class={svgclass}
+  class={svgClass}
   {...attributes}
   aria-label={ariaLabel}
   viewBox="0 0 24 24"
@@ -71,6 +71,6 @@
 @prop ariaLabel = 'heart'
 @prop id = idGenerator()
 @prop role = 'img'
-@prop svgclass
+@prop svgClass
 @prop ...attributes
 -->

src/lib/rating/Star.svelte

@@ -8,7 +8,7 @@
     ariaLabel?: string;
     id?: string;
     role?: string;
-    svgclass?: string;
+    svgClass?: string;
   }
 
   let {
@@ -19,7 +19,7 @@
     ariaLabel = 'star',
     id = idGenerator(),
     role = 'img',
-    svgclass,
+    svgClass,
     ...attributes
   }: Props = $props();
 </script>
@@ -28,7 +28,7 @@
   width={size}
   height={size}
   {...attributes}
-  class={svgclass}
+  class={svgClass}
   aria-label={ariaLabel}
   viewBox="100 100 120 120"
   {role}
@@ -67,6 +67,6 @@
 @prop ariaLabel = 'star'
 @prop id = idGenerator()
 @prop role = 'img'
-@prop svgclass
+@prop svgClass
 @prop ...attributes
 -->

src/lib/rating/Thumbup.svelte

@@ -9,7 +9,7 @@
     ariaLabel?: string;
     id?: string;
     role?: string;
-    svgclass?: string;
+    svgClass?: string;
     onclick?: () => void;
   }
 
@@ -21,7 +21,7 @@
     ariaLabel = 'thumbup',
     id = idGenerator(),
     role = 'img',
-    svgclass,
+    svgClass,
     onclick,
     ...attributes
   }: Props = $props();
@@ -31,7 +31,7 @@
   width={size}
   height={size}
   {...attributes}
-  class={svgclass}
+  class={svgClass}
   aria-label={ariaLabel}
   viewBox="0 0 24 24"
   {role}
@@ -73,7 +73,7 @@
 @prop ariaLabel = 'thumbup'
 @prop id = idGenerator()
 @prop role = 'img'
-@prop svgclass
+@prop svgClass
 @prop onclick
 @prop ...attributes
 -->

src/lib/sidebar/Sidebar.svelte

@@ -5,21 +5,21 @@
   import { twMerge } from 'tailwind-merge';
   interface Props {
     children: Snippet;
-    asideclass?: string | undefined;
+    asideClass?: string | undefined;
     ariaLabel?: string | undefined;
     divClass?: string | undefined;
     nonActiveClass?: string | undefined;
     activeClass?: string | undefined;
-    aclass?: string | undefined;
+    class?: string | undefined;
   }
   let {
     children,
     divClass,
-    asideclass,
+    asideClass,
     ariaLabel,
     nonActiveClass = '',
     activeClass = '',
-    aclass,
+    class: className,
     ...attributes
   }: Props = $props();
   
@@ -29,15 +29,12 @@
     'overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800',
     divClass
   );
-  // let activeCls = twMerge(activeClass, aclass)
-  // let nonActiveCls = twMerge(nonActiveClass, aclass)
-  let asideCls = twMerge('w-64', asideclass);
-  // activeCls = twMerge(activeClass, aclass);
-  // nonActiveClass = twMerge(nonActiveClass, aclass);
-  // $inspect('aclass: ', aclass)
+
+  let asideCls = twMerge('w-64', asideClass);
+  
   setContext<SidebarType>('sidebarContext', {
-    activeClass: twMerge(activeCls, activeClass, aclass),
-    nonActiveClass: twMerge(nonActiveCls, nonActiveClass, aclass)
+    activeClass: twMerge(activeCls, activeClass, className),
+    nonActiveClass: twMerge(nonActiveCls, nonActiveClass, className)
   });
   // $inspect('activeClass: ', activeClass)
 </script>
@@ -54,10 +51,10 @@
 ## Props
 @prop children
 @prop divClass
-@prop asideclass
+@prop asideClass
 @prop ariaLabel
 @prop nonActiveClass = ''
 @prop activeClass = ''
-@prop aclass
+@prop class
 @prop ...attributes
 -->

src/lib/sidebar/SidebarDropdownWrapper.svelte

@@ -11,13 +11,13 @@
     arrowdown?: Snippet;
     iconSlot?: Snippet;
     isOpen?: boolean | undefined;
-    btnclass?: string | undefined;
+    btnClass?: string | undefined;
     label: string | undefined;
     spanClass?: string | undefined;
-    ulclass?: string | undefined;
+    ulClass?: string | undefined;
     transitionType?: TransitionTypes;
     transitionParams?: TransitionParamTypes;
-    svgclass?: string;
+    svgClass?: string;
   }
 
   let {
@@ -26,29 +26,29 @@
     arrowdown,
     iconSlot,
     isOpen,
-    btnclass,
+    btnClass,
     label,
     spanClass,
-    ulclass,
+    ulClass,
     transitionType = 'slide',
     transitionParams = {},
-    svgclass,
+    svgClass,
     ...attributes
   }: Props = $props();
 
   let btnCls = twMerge(
     'flex items-center w-full text-base font-normal text-gray-900 rounded transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700',
-    btnclass
+    btnClass
   );
 
   let spanCls: string = twMerge(
     'flex-1 ms-3 text-left whitespace-nowrap',
     spanClass
   );
-  let ulCls: string = twMerge('py-2 space-y-2', ulclass);
+  let ulCls: string = twMerge('py-2 space-y-2', ulClass);
   let svgCls: string = twMerge(
     'h-3 w-3 text-gray-800 dark:text-white',
-    svgclass
+    svgClass
   );
 
   // make a custom transition function that returns the desired transition
@@ -145,11 +145,11 @@
 @props:arrowdown?: Snippet;
 @props:iconSlot?: Snippet;
 @props:isOpen?: boolean | undefined;
-@props:btnclass?: string | undefined;
+@props:btnClass?: string | undefined;
 @props:label: string | undefined;
 @props:spanClass?: string | undefined;
-@props:ulclass?: string | undefined;
+@props:ulClass?: string | undefined;
 @props:transitionType?: TransitionTypes;
 @props:transitionParams?: TransitionParamTypes;
-@props:svgclass?: string;
+@props:svgClass?: string;
 -->

src/lib/spinner/Spinner.svelte

@@ -9,11 +9,11 @@
     size?: string | number;
     currentFill?: string;
     currentColor?: string;
-    svgclass?: string;
+    svgClass?: string;
   }
 
   let {
-    svgclass,
+    svgClass,
     color = 'primary',
     bg = 'text-gray-300',
     customColor,
@@ -54,7 +54,7 @@
     iconsize,
     bg,
     fillColorCls,
-    svgclass
+    svgClass
   )}
   viewBox="0 0 100 101"
   fill="none"
@@ -74,7 +74,7 @@
 @component
 [Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
 ## Props
-@prop svgclass
+@prop svgClass
 @prop color = 'primary'
 @prop bg = 'text-gray-300'
 @prop customColor

src/routes/components/button/+page.svelte

@@ -232,10 +232,10 @@
 <H2>Loader</H2>
 <CodeWrapper>
   <Button>
-    <Spinner svgclass="me-3" size="4" color="white" />Loading ...
+    <Spinner svgClass="me-3" size="4" color="white" />Loading ...
   </Button>
   <Button color="alternative">
-    <Spinner svgclass="me-3" size="4" />Loading ...
+    <Spinner svgClass="me-3" size="4" />Loading ...
   </Button>
 </CodeWrapper>
 <HighlightCompo code={modules['./md/loader.md'] as string} />

src/routes/components/drawer/+page.svelte

@@ -230,7 +230,7 @@
         <span class="sr-only">Close modal</span>
       </button>
     </div>
-    <Sidebar aclass="p-2">
+    <Sidebar class="p-2">
       <SidebarGroup>
         <SidebarItem label="Dashboard">
           {#snippet iconSlot()}
@@ -239,7 +239,7 @@
             />
           {/snippet}
         </SidebarItem>
-        <SidebarDropdownWrapper label="E-commerce" btnclass="p-2">
+        <SidebarDropdownWrapper label="E-commerce" btnClass="p-2">
           {#snippet iconSlot()}
             <ShoppingBagSolid
               class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"