v0.8.0

Author: shinokada

.changeset/dry-cycles-joke.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.8.0
+
+### Minor Changes
+
+- feat: variants ([`a00d4f34dd05900e9ab84b93055073ba51171d7a`](https://github.com/shinokada/svelte-5-ui-lib/commit/a00d4f34dd05900e9ab84b93055073ba51171d7a))
+
 ## 0.7.2
 
 ### Patch Changes

CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "svelte-5-ui-lib",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "A UI library for Svelte 5.",
   "license": "MIT",
   "main": "dist/index.js",

package.json

@@ -21,18 +21,22 @@
 
   const ctx: AccordionCtxType = {
     flush,
-    activeClass: twMerge('bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800', activeClass),
-    inactiveClass: twMerge('text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800', inactiveClass)
+    activeClass: twMerge(
+      'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800',
+      activeClass
+    ),
+    inactiveClass: twMerge(
+      'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800',
+      inactiveClass
+    )
     // selected: multiple ? undefined : writable()
   };
 
   setContext<AccordionCtxType>('ctx', ctx);
 
-  let accordionClass = $derived(twMerge(
-    accordionVariants({ flush }),
-    defaultClass,
-    className
-  ));
+  let accordionClass = $derived(
+    twMerge(accordionVariants({ flush }), defaultClass, className)
+  );
 </script>
 
 <div {...attributes} class={accordionClass} color="none">
@@ -45,11 +49,9 @@
 ## Props
 @prop children
 @prop flush = false
-@prop activeClass = 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800'
-@prop inactiveClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800'
+@prop activeClass = ''
+@prop inactiveClass = ''
 @prop defaultClass = 'text-gray-500 dark:text-gray-400'
-@prop classActive
-@prop classInactive
 @prop class: className
 @prop transition = undefined
 @prop params

src/lib/accordion/Accordion.svelte

@@ -20,14 +20,16 @@
     ...attributes
   }: Props = $props();
 
-  let divCls = $derived(alertVariants({
-    color,
-    rounded,
-    border,
-    icon: !!icon,
-    dismissable,
-    className
-  }));
+  let divCls = $derived(
+    alertVariants({
+      color,
+      rounded,
+      border,
+      icon: !!icon,
+      dismissable,
+      className
+    })
+  );
   // $inspect('divCls: ', divCls);
 </script>
 

src/lib/alert/Alert.svelte

@@ -20,9 +20,15 @@
 
   dot = dot && { placement: 'top-right', color: 'gray', size: 'lg', ...dot };
 
-  let avatarClass = $derived(avatarVariants({ 
-    rounded, border, stacked, size, className 
-  }));
+  let avatarClass = $derived(
+    avatarVariants({
+      rounded,
+      border,
+      stacked,
+      size,
+      className
+    })
+  );
 </script>
 
 {#if !src || !!href || children || dot}

src/lib/avatar/Avatar.svelte

@@ -21,13 +21,15 @@
     ...attributes
   }: Props = $props();
 
-  let badgeClass = $derived(badgeVariants({
-    color,
-    size: large ? 'large' : 'small',
-    border,
-    rounded,
-    className
-  }));
+  let badgeClass = $derived(
+    badgeVariants({
+      color,
+      size: large ? 'large' : 'small',
+      border,
+      rounded,
+      className
+    })
+  );
   // $inspect('badgeStatus: ', badgeStatus);
 </script>
 

src/lib/badge/Badge.svelte

@@ -68,11 +68,12 @@
 ## Props
 @prop children
 @prop header
+@prop bannerStatus = $bindable(true)
 @prop position = 'sticky'
 @prop dismissable = true
 @prop color = 'gray'
 @prop bannerType = 'default'
-@prop divClass
+@prop class: className
 @prop innerClass
 @prop transition = fade
 @prop params

src/lib/banner/Banner.svelte

@@ -23,6 +23,6 @@
 ## Props
 @prop children
 @prop size = 'md'
-@prop class: divClass
+@prop class: className
 @prop ...attributes
 -->

src/lib/buttongroup/ButtonGroup.svelte

@@ -2,8 +2,8 @@
   // import type { Snippet } from 'svelte';
   // import { twMerge } from 'tailwind-merge';
   // import type { HTMLAttributes } from 'svelte/elements';
-  import { cardVariants, type CardProps as Props } from '.'
-  
+  import { cardVariants, type CardProps as Props } from '.';
+
   let {
     children,
     href,
@@ -18,17 +18,26 @@
     ...attributes
   }: Props = $props();
 
-  const {base, image, content} = $derived(cardVariants({
-    size,
-    shadow,
-    padding,
-    horizontal,
-    reverse,
-    href: !!href
-  }));
+  const { base, image, content } = $derived(
+    cardVariants({
+      size,
+      shadow,
+      padding,
+      horizontal,
+      reverse,
+      href: !!href
+    })
+  );
 </script>
 
-<svelte:element this={href ? 'a' : 'div'} {href} class={base()} role={href ? 'link' : 'presentation'} onclick={onclick} {...attributes}>
+<svelte:element
+  this={href ? 'a' : 'div'}
+  {href}
+  class={base()}
+  role={href ? 'link' : 'presentation'}
+  {onclick}
+  {...attributes}
+>
   {#if img}
     <img class={image()} src={img.src} alt={img.alt} />
     <div class={content()}>
@@ -48,7 +57,6 @@
 @prop children
 @prop href
 @prop horizontal = false
-@prop target
 @prop shadow = true
 @prop reverse = false
 @prop img