flowbite-svelte 1.13.4 → 1.13.5

package/dist/forms/checkbox/Checkbox.svelte

@@ -1,46 +1,60 @@
 <script lang="ts">
   import { checkbox } from ".";
   import clsx from "clsx";
-  import { type CheckboxProps, type CheckboxItem, Label } from "../..";
+  import { type CheckboxProps, Label } from "../..";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
 
-  let { children, color = "primary", custom, inline, tinted, rounded, group = $bindable([]), choices = [], checked = $bindable(false), indeterminate, classes, class: className, divClass, disabled = false, value, labelProps = {}, ...restProps }: CheckboxProps = $props();
+  let { children, color = "primary", custom, inline, tinted, rounded, group = $bindable([]), choices = [], checked = $bindable(false), classes, class: className, divClass, disabled, value, labelProps = {}, ...restProps }: CheckboxProps = $props();
 
   warnThemeDeprecation("Checkbox", { divClass }, { divClass: "div" });
   const styling = $derived(classes ?? { div: divClass });
 
   const theme = getTheme("checkbox");
 
-  const disabledValue = $derived(disabled === null ? undefined : disabled);
-  const { base, div: divStyle } = $derived(checkbox({ color, tinted, custom, rounded, inline, disabled: disabledValue }));
+  const { base, div: divStyle } = $derived(checkbox({ color, tinted, custom, rounded, inline, disabled: disabled ?? false }));
 
-  // Separate label rendering logic
-  function renderLabel(choice?: CheckboxItem) {
-    if (!choice) return "";
+  $effect(() => {
+    if (value !== undefined && Array.isArray(group)) {
+      checked = group.includes(value);
+    }
+  });
+
+  $effect(() => {
+    if (value === undefined || !Array.isArray(group)) return;
+    // There's a bug in Svelte and bind:group is not working with wrapped checkbox
+    // This workaround is taken from:
+    // https://svelte.dev/repl/de117399559f4e7e9e14e2fc9ab243cc?version=3.12.1
+    const index = group.indexOf(value);
+    if (checked === undefined) checked = index >= 0;
 
-    if (children) {
-      return children(choice);
+    if (checked) {
+      if (index < 0) {
+        group.push(value);
+      }
+    } else {
+      if (index >= 0) {
+        group.splice(index, 1);
+      }
     }
-    return choice.label || "";
-  }
+  });
 </script>
 
 {#if choices.length > 0}
-  {#each choices as choice, i}
-    <div class={divStyle({ class: clsx(theme?.div, styling.div) })}>
-      <Label show={true} {...labelProps}>
-        <input type="checkbox" value={choice.value} checked={choice.checked ?? false} {disabled} bind:group {...restProps} class={base({ class: clsx(theme?.base, className) })} />
-        {renderLabel(choice)}
-      </Label>
-    </div>
-  {/each}
-{:else}
-  <div class={divStyle({ class: clsx(theme?.div, styling.div) })}>
-    <Label show={true} {...labelProps}>
-      <input type="checkbox" {value} bind:checked {indeterminate} {disabled} {...restProps} class={base({ class: clsx(theme?.base, className) })} />
+  {#each choices as choice, i (choice.value ?? i)}
+    <Label show={!!children || !!choice.label} {...labelProps} class={divStyle({ class: clsx(theme?.div, styling.div) })}>
+      <input type="checkbox" value={choice.value} checked={choice.checked ?? false} {disabled} bind:group {...restProps} class={base({ class: clsx(theme?.base, className) })} />
       {#if children}
-        {@render children({ value, checked, disabled })}
+        {@render children({ value: choice.value, checked: choice.checked, disabled })}
+      {:else}
+        {choice.label}
       {/if}
     </Label>
-  </div>
+  {/each}
+{:else}
+  <Label show={!!children} {...labelProps} class={divStyle({ class: clsx(theme?.div, styling.div) })}>
+    <input type="checkbox" {value} bind:checked {disabled} {...restProps} class={base({ class: clsx(theme?.base, className) })} />
+    {#if children}
+      {@render children({ value, checked, disabled })}
+    {/if}
+  </Label>
 {/if}

package/dist/forms/checkbox/CheckboxButton.svelte

@@ -1,56 +1,20 @@
 <script lang="ts">
+  import { type CheckboxButtonProps } from "../..";
   import Button from "../../buttons/Button.svelte";
+  import { getTheme } from "../../theme/themeUtils";
   import clsx from "clsx";
-  import { type CheckboxButtonProps } from "../..";
+  import Checkbox from "./Checkbox.svelte";
   import { checkboxButton } from "./theme";
-  import { getTheme } from "../../theme/themeUtils";
 
-  let { children, class: className, group = $bindable([]), value, checked, inline, pill, outline, size, color, shadow, ...restProps }: CheckboxButtonProps = $props();
+  let { children, class: className, group = $bindable(), checked = $bindable(false), inline, pill, outline, size, color, shadow, ...restProps }: CheckboxButtonProps = $props();
 
   const theme = getTheme("checkboxButton");
 
-  // react on external group changes
-  function init(_: HTMLElement, _group: (string | number)[]) {
-    group = _group ?? [];
-
-    if (checked === undefined && value !== undefined) checked = group.includes(value);
-    onChange();
-
-    $effect(() => {
-      if (value !== undefined) {
-        checked = group.includes(value);
-      }
-    });
-  }
-
-  function onChange() {
-    if (!value) return;
-
-    // There's a bug in Svelte and bind:group is not working with wrapped checkbox
-    // This workaround is taken from:
-    // https://svelte.dev/repl/de117399559f4e7e9e14e2fc9ab243cc?version=3.12.1
-    const index = group.indexOf(value);
-
-    if (checked === undefined) checked = index >= 0;
-
-    if (checked) {
-      if (index < 0) {
-        group.push(value);
-        group = group;
-      }
-    } else {
-      if (index >= 0) {
-        group.splice(index, 1);
-        group = group;
-      }
-    }
-  }
-
   let buttonClass: string = $derived(checkboxButton({ inline, checked, class: clsx(theme, className) }));
 </script>
 
-<Button tag="label" {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
-  <input use:init={group} type="checkbox" bind:checked {value} {...restProps} class="sr-only" onchange={onChange} />
+<Button tag="label" {pill} {outline} {size} {color} {shadow} class={buttonClass}>
+  <Checkbox bind:group bind:checked {...restProps} class="sr-only"></Checkbox>
   {@render children?.()}
 </Button>
 

package/dist/forms/checkbox/CheckboxButton.svelte.d.ts

@@ -17,6 +17,6 @@ import { type CheckboxButtonProps } from "../..";
  * @prop shadow
  * @prop ...restProps
  */
-declare const CheckboxButton: import("svelte").Component<CheckboxButtonProps, {}, "group">;
+declare const CheckboxButton: import("svelte").Component<CheckboxButtonProps, {}, "group" | "checked">;
 type CheckboxButton = ReturnType<typeof CheckboxButton>;
 export default CheckboxButton;

package/dist/forms/checkbox/theme.d.ts

@@ -1,6 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
 import type { Classes } from "../../theme/themeUtils";
-export type CheckboxVariants = VariantProps<typeof checkbox> & Classes<typeof checkbox>;
 export declare const checkbox: import("tailwind-variants").TVReturnType<{
     color: {
         primary: {
@@ -93,6 +92,7 @@ export declare const checkbox: import("tailwind-variants").TVReturnType<{
             base: string;
             div: string;
         };
+        false: {};
     };
 }, {
     base: string;
@@ -189,6 +189,7 @@ export declare const checkbox: import("tailwind-variants").TVReturnType<{
             base: string;
             div: string;
         };
+        false: {};
     };
 }, {
     base: string;
@@ -285,11 +286,13 @@ export declare const checkbox: import("tailwind-variants").TVReturnType<{
             base: string;
             div: string;
         };
+        false: {};
     };
 }, {
     base: string;
     div: string;
 }, undefined, unknown, unknown, undefined>>;
+export type CheckboxVariants = Omit<VariantProps<typeof checkbox> & Classes<typeof checkbox>, "disabled">;
 export declare const checkboxButton: import("tailwind-variants").TVReturnType<{
     inline: {
         true: string;
@@ -315,3 +318,4 @@ export declare const checkboxButton: import("tailwind-variants").TVReturnType<{
         true: string;
     };
 }, undefined, "", unknown, unknown, undefined>>;
+export type CheckboxButtonVariants = VariantProps<typeof checkboxButton>;

package/dist/forms/checkbox/theme.js

@@ -88,7 +88,8 @@ export const checkbox = tv({
             true: {
                 base: "cursor-not-allowed opacity-50 bg-gray-200 border-gray-300",
                 div: "cursor-not-allowed opacity-70"
-            }
+            },
+            false: {},
         }
     },
     defaultVariants: {

package/dist/index.d.ts

@@ -35,7 +35,7 @@ export * from "./sidebar";
 export * from "./skeleton";
 export * from "./speed-dial";
 export * from "./spinner";
-export * from "./stepindicator";
+export * from "./step-indicator";
 export * from "./stepper";
 export * from "./tabs";
 export * from "./table";

package/dist/index.js

@@ -38,7 +38,7 @@ export * from "./sidebar";
 export * from "./skeleton";
 export * from "./speed-dial";
 export * from "./spinner";
-export * from "./stepindicator";
+export * from "./step-indicator";
 export * from "./stepper";
 export * from "./tabs";
 export * from "./table";

package/dist/theme/themes.d.ts

@@ -31,7 +31,7 @@ export { sidebar, sidebarBrand, sidebarButton, sidebarCta, sidebarDropdownWrappe
 export { cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder } from "../skeleton";
 export { speedDial, speedDialButton } from "../speed-dial";
 export { spinner } from "../spinner";
-export { stepIndicator } from "../stepindicator";
+export { stepIndicator } from "../step-indicator";
 export { stepper, progressStepper, verticalStepper, detailedStepper, breadcrumbStepper, timelineStepper } from "../stepper";
 export { table, tableBodyCell, tableBodyRow, tableHead, tableHeadCell, tableSearch } from "../table";
 export { tabs, tabItem } from "../tabs";

package/dist/theme/themes.js

@@ -31,7 +31,7 @@ export { sidebar, sidebarBrand, sidebarButton, sidebarCta, sidebarDropdownWrappe
 export { cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder } from "../skeleton";
 export { speedDial, speedDialButton } from "../speed-dial";
 export { spinner } from "../spinner";
-export { stepIndicator } from "../stepindicator";
+export { stepIndicator } from "../step-indicator";
 export { stepper, progressStepper, verticalStepper, detailedStepper, breadcrumbStepper, timelineStepper } from "../stepper";
 export { table, tableBodyCell, tableBodyRow, tableHead, tableHeadCell, tableSearch } from "../table";
 export { tabs, tabItem } from "../tabs";

package/dist/types.d.ts

@@ -29,7 +29,7 @@ import type { SidebarVariants, SidebarCtaVariants, SidebarBrandVariants, Sidebar
 import type { CardPlaceholderVariants, ImagePlaceholderVariants, ListPlaceholderVariants, SkeletonVariants, TestimonialPlaceholderVariants, TextPlaceholderVariants, VideoPlaceholderVariants, WidgetPlaceholderVariants } from "./skeleton/theme";
 import type { SpeedDialVariants, SpeedDialButtonVariants } from "./speed-dial/theme";
 import type { SpinnerVaraiants } from "./spinner/theme";
-import type { StepIndicatorVariants } from "./stepindicator/theme";
+import type { StepIndicatorVariants } from "./step-indicator/theme";
 import type { StepperVariants, ProgressStepperVariants, DetailedStepperVariants, VerticalStepperVariants, BreadcrumbStepperVariants, TimelineStepperVariants } from "./stepper/theme";
 import type { PaginationItemVariants, PaginationVariants } from "./pagination/theme";
 import type { ProgressbarVariants, ProgressradialVariants } from "./progress/theme";
@@ -40,7 +40,7 @@ import type { TimelineVariants, ActivityItemVariants, GroupVariants, GroupItemVa
 import type { ToastVaraints } from "./toast/theme";
 import type { ToolbarButtonVariants, ToolbarGroupVariants, ToolbarVariants } from "./toolbar/theme";
 import type { TooltipVariants } from "./tooltip/theme";
-import type { CheckboxVariants } from "./forms/checkbox/theme";
+import type { CheckboxButtonVariants, CheckboxVariants } from "./forms/checkbox/theme";
 import type { FileuploadViariants } from "./forms/fileupload/theme";
 import type { FloatingLabelInputVaratiants } from "./forms/floating-label/theme";
 import type { HelperVariants } from "./forms/helper/theme";
@@ -578,7 +578,7 @@ export interface CheckboxItem {
     checked?: boolean | null;
     [key: string]: any;
 }
-export interface CheckboxProps extends CheckboxVariants, Omit<HTMLInputAttributes, "children" | "color" | "disabled"> {
+export interface CheckboxProps extends CheckboxVariants, Omit<HTMLInputAttributes, "children" | "color"> {
     children?: Snippet<[{
         value?: string | number;
         checked: boolean;
@@ -587,16 +587,11 @@ export interface CheckboxProps extends CheckboxVariants, Omit<HTMLInputAttribute
     inline?: boolean;
     tinted?: boolean;
     rounded?: boolean;
-    group?: (string | number)[];
     choices?: CheckboxItem[];
-    indeterminate?: boolean;
     divClass?: ClassValue;
-    labelProps?: Record<string, any>;
+    labelProps?: Omit<LabelProps, "children">;
 }
-export interface CheckboxButtonProps extends Omit<HTMLInputAttributes, "size"> {
-    group?: (string | number)[];
-    value?: string | number;
-    checked?: boolean;
+export interface CheckboxButtonProps extends CheckboxButtonVariants, Omit<HTMLInputAttributes, "size" | "checked"> {
     inline?: boolean;
     pill?: boolean;
     outline?: boolean;

package/dist/utils/singleselection.svelte.js

@@ -27,8 +27,10 @@ export function createSingleSelectionContext(nonReactive = false) {
  * @returns {SingleSelectionContext<T>}
  */
 function setSelected(context, open, value) {
-  if (open) context.value = value;
-  else if (context.value === value) context.value = undefined;
+  if (Object.hasOwn(context, 'value')) {
+    if (open) context.value = value;
+    else if (context.value === value) context.value = undefined;
+  }
   return context;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.13.4",
+  "version": "1.13.5",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -25,7 +25,7 @@
     "@sveltejs/adapter-auto": "^6.1.0",
     "@sveltejs/adapter-vercel": "^5.10.2",
     "@sveltejs/enhanced-img": "0.6.1",
-    "@sveltejs/kit": "^2.36.3",
+    "@sveltejs/kit": "^2.37.0",
     "@sveltejs/package": "2.5.0",
     "@sveltejs/vite-plugin-svelte": "^6.1.3",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
@@ -34,7 +34,7 @@
     "@testing-library/svelte": "^5.2.8",
     "@testing-library/user-event": "^14.6.1",
     "@tiptap/core": "3.3.0",
-    "dayjs": "^1.11.15",
+    "dayjs": "^1.11.18",
     "deepmerge": "^4.3.1",
     "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.8",
@@ -58,12 +58,12 @@
     "publint": "^0.3.12",
     "runatics": "^0.1.4",
     "runes-meta-tags": "^0.4.5",
-    "satori": "^0.16.2",
+    "satori": "^0.18.1",
     "satori-html": "^0.3.2",
     "simple-datatables": "^10.0.0",
     "svelte": "^5.38.6",
     "svelte-check": "^4.3.1",
-    "svelte-doc-llm": "^0.2.2",
+    "svelte-doc-llm": "^0.4.0",
     "svelte-lib-helpers": "^0.4.30",
     "svelte-meta-tags": "^4.4.0",
     "svelte-rune-highlight": "^0.7.1",
@@ -634,8 +634,8 @@
       "svelte": "./dist/spinner/Spinner.svelte"
     },
     "./StepIndicator.svelte": {
-      "types": "./dist/stepindicator/StepIndicator.svelte.d.ts",
-      "svelte": "./dist/stepindicator/StepIndicator.svelte"
+      "types": "./dist/step-indicator/StepIndicator.svelte.d.ts",
+      "svelte": "./dist/step-indicator/StepIndicator.svelte"
     },
     "./BreadcrumbStepper.svelte": {
       "types": "./dist/stepper/BreadcrumbStepper.svelte.d.ts",
@@ -839,8 +839,8 @@
     "gen:docspropvalue": "svelte-lib-helpers docspropvalue themesberg/flowbite-svelte",
     "gen:component-data-prop-value": "svelte-lib-helpers component-data-prop-value themesberg/flowbite-svelte",
     "copy:packagejson": "svelte-lib-helpers package",
-    "lib-helpers": "pnpm gen:component-data-prop-value && pnpm gen:docspropvalue && pnpm format && pnpm package && pnpm gen:exports && pnpm copy:packagejson && pnpm llm",
-    "llm": "svelte-doc-llm",
+    "lib-helpers": "pnpm gen:component-data-prop-value && pnpm gen:docspropvalue && pnpm format && pnpm package && pnpm gen:exports && pnpm copy:packagejson && pnpm llm && pnpm update:icons-llm",
+    "llm": "svelte-doc-llm && ./scripts/update-llms.sh",
     "ch": "npx changeset",
     "cv": "npx changeset version",
     "cp": "npx changeset publish"