docs: update checkbox

Author: shinokada

src/lib/forms/checkbox-button/CheckboxButton.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import Button from '$lib/buttons/Button.svelte';
+  import type { ButtonColorType, SizeType } from '$lib/types';
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children: Snippet;
+    class?: string | undefined;
+    group?: (string | number)[];
+    value?: string | number;
+    checked?: boolean | undefined;
+    inline?: boolean;
+    pill?: boolean;
+    outline?: boolean;
+    size?: SizeType;
+    color?: ButtonColorType;
+    shadow?: boolean;
+  }
+  let { children, class: className, group = [], value = 'on', checked, inline = true, pill, outline, size, color, shadow, ...restProps }: Props = $props();
+
+  // react on external group changes
+  function init(_: HTMLElement, _group: (string | number)[]) {
+    if (checked === undefined && value !== undefined) checked = _group.includes(value);
+    onChange();
+
+    return {
+      update(_group: (string | number)[]) {
+        if (value !== undefined) {
+          checked = _group.includes(value);
+        }
+      }
+    };
+  }
+
+  function onChange() {
+    // 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(twMerge(inline ? 'inline-flex' : 'flex', 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}/>
+  {@render children()}
+</Button>

src/lib/forms/checkbox-button/index.ts

@@ -0,0 +1,6 @@
+import CheckboxButton from "./CheckboxButton.svelte";
+
+
+export { CheckboxButton };
+
+

src/lib/forms/checkbox-button/theme.ts

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import { labelCls, inputCls } from '../radio/Radio.svelte';
   import Label from '../label/Label.svelte';
   import { type CheckboxProps as Props, checkbox } from '.';
 
@@ -12,7 +10,8 @@
     inline,
     tinted,
     rounded,
-    group = [],
+    group = $bindable([]),
+    choices = [],
     checked = $bindable(false),
     spacing,
     groupLabelClass,
@@ -25,7 +24,19 @@
     checkbox({ color, tinted, custom, rounded, inline })
   );
 </script>
-
+{#if choices.length > 0}
+  {#each choices as {value, checkboxLabel}, i}
+    <Label class={label({ class: groupLabelClass })} for={`checkbox-${i}`}>
+      { checkboxLabel }
+      <input id={`checkbox-${i}`} type="checkbox" value={ value } bind:group {...attributes} 
+      class={base({ class: className })}
+      />
+      {#if children}
+      {@render children()}
+      {/if}
+    </Label>
+  {/each}
+{:else}
 <Label class={label({ class: groupLabelClass })}>
   <input
     type="checkbox"
@@ -39,6 +50,7 @@
     {@render children()}
   {/if}
 </Label>
+{/if}
 
 <!--
 @component

src/lib/forms/checkbox/Checkbox.svelte

@@ -5,6 +5,12 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 import { checkbox } from './theme';
 import { type VariantProps } from 'tailwind-variants';
 
+type CheckboxItem = {
+  value: string;
+  checkboxLabel?: string; 
+  isChecked?: boolean; 
+};
+
 type ColorType = VariantProps<typeof checkbox>['color'];
 interface CheckboxProps extends HTMLInputAttributes {
   children?: Snippet;
@@ -15,11 +21,12 @@ interface CheckboxProps extends HTMLInputAttributes {
   tinted?: boolean;
   rounded?: boolean;
   group?: (string | number)[];
+  choices?: CheckboxItem[];
   checked?: boolean | undefined | null;
   spacing?: string | undefined | null;
   groupLabelClass?: string | undefined;
   indeterminate?: boolean;
   class?: string | undefined | null;
 }
 
-export { Checkbox, checkbox, type CheckboxProps };
+export { Checkbox, checkbox, type CheckboxProps, type CheckboxItem, type ColorType };

src/lib/forms/checkbox/index.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const checkbox = tv({
   slots: {
-    base: 'w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2',
+    base: 'w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 rounded',
     label: ''
   },
   variants: {

src/lib/forms/checkbox/theme.ts

@@ -0,0 +1,55 @@
+<script lang="ts">
+  // import type { FormSizeType } from '$lib/types';
+  import {Input} from '$lib';
+  import type { Action } from 'svelte/action';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children?: Snippet;
+    right?: Snippet;
+    size?:  'sm' | 'md' | 'lg' ;
+    placeholder?: string;
+    value?: any;
+    show?: boolean;
+    use?: Action<HTMLElement, any>;
+    class?: string | undefined | null;
+  }
+  
+  let { children, right, size = 'lg', placeholder = 'Search', value, show = true, use = () => {}, class: className, ...restProps }: Props = $props();
+
+  // export let size: FormSizeType = 'lg';
+  // export let placeholder: string = 'Search';
+  // export let value: any = undefined;
+  // export let show: boolean = true;
+  // export let use: Action<HTMLElement, any> = () => {};
+
+  const sizes = {
+    sm: 'w-3.5 h-3.5',
+    md: 'w-5 h-5',
+    lg: 'w-6 h-6'
+  };
+</script>
+
+{#if show}
+  <div class="relative w-full" use:use>
+    <Input bind:value type="search" {placeholder} inputSize={size} {...restProps} class={className}>
+      {#snippet left()}
+      <svg class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+      </svg>
+      {/snippet}
+      {#if right}
+        {@render right()}
+      {/if}
+    </Input>
+    {#if children}
+      <div class="flex absolute inset-y-0 end-0 items-center text-gray-500 dark:text-gray-400">
+        {@render children()}
+      </div>
+    {/if}
+  </div>
+{:else}
+  {#if children}
+  {@render children()}
+  {/if}
+{/if}

src/lib/forms/search/Search.svelte

@@ -0,0 +1,4 @@
+import Search from './Search.svelte';
+
+
+export { Search }

src/lib/forms/search/index.ts

@@ -36,6 +36,7 @@ export * from './video';
 
 // forms
 export * from './forms/checkbox';
+export * from './forms/checkbox-button';
 export * from './forms/floating-label-input';
 export * from './forms/helper';
 export * from './forms/input';
@@ -45,6 +46,7 @@ export * from './forms/select';
 export * from './forms/radio';
 export * from './forms/radio-button';
 export * from './forms/range';
+export * from './forms/search';
 export * from './forms/textarea';
 export * from './forms/toggle';