v0.8.6

Author: shinokada

.changeset/clean-tables-grab.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.8.6
+
+### Patch Changes
+
+- fix: Input component ([`0443fbd838714b5a9830e7bb5e64064df33cbb02`](https://github.com/shinokada/svelte-5-ui-lib/commit/0443fbd838714b5a9830e7bb5e64064df33cbb02))
+
 ## 0.8.5
 
 ### Patch Changes

CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "svelte-5-ui-lib",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "description": "A UI library for Svelte 5.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -239,6 +239,14 @@
       "types": "./dist/forms/checkbox/Checkbox.svelte.d.ts",
       "svelte": "./dist/forms/checkbox/Checkbox.svelte"
     },
+    "./CheckboxButton.svelte": {
+      "types": "./dist/forms/checkbox-button/CheckboxButton.svelte.d.ts",
+      "svelte": "./dist/forms/checkbox-button/CheckboxButton.svelte"
+    },
+    "./Fileupload.svelte": {
+      "types": "./dist/forms/fileupload/Fileupload.svelte.d.ts",
+      "svelte": "./dist/forms/fileupload/Fileupload.svelte"
+    },
     "./FloatingLabelInput.svelte": {
       "types": "./dist/forms/floating-label-input/FloatingLabelInput.svelte.d.ts",
       "svelte": "./dist/forms/floating-label-input/FloatingLabelInput.svelte"
@@ -271,6 +279,10 @@
       "types": "./dist/forms/range/Range.svelte.d.ts",
       "svelte": "./dist/forms/range/Range.svelte"
     },
+    "./Search.svelte": {
+      "types": "./dist/forms/search/Search.svelte.d.ts",
+      "svelte": "./dist/forms/search/Search.svelte"
+    },
     "./Select.svelte": {
       "types": "./dist/forms/select/Select.svelte.d.ts",
       "svelte": "./dist/forms/select/Select.svelte"

package.json

@@ -17,11 +17,25 @@
     color?: ButtonColorType;
     shadow?: boolean;
   }
-  let { children, class: className, group = [], value = 'on', checked, inline = true, pill, outline, size, color, shadow, ...restProps }: Props = $props();
+  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);
+    if (checked === undefined && value !== undefined)
+      checked = _group.includes(value);
     onChange();
 
     return {
@@ -54,17 +68,47 @@
     }
   }
 
-  let buttonClass: string = $derived(twMerge(inline ? 'inline-flex' : 'flex', className));
+  let buttonClass: string = $derived(
+    twMerge(inline ? 'inline-flex' : 'flex', className)
+  );
 </script>
 
-<Button tag="label" {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
+<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}/>
+    onchange={onChange}
+  />
   {@render children()}
 </Button>
+
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@prop children
+@prop class: className
+@prop group = []
+@prop value = 'on'
+@prop checked
+@prop inline = true
+@prop pill
+@prop outline
+@prop size
+@prop color
+@prop shadow
+@prop ...restProps
+-->

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

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

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

@@ -24,32 +24,38 @@
     checkbox({ color, tinted, custom, rounded, inline })
   );
 </script>
+
 {#if choices.length > 0}
-  {#each choices as {value, checkboxLabel}, i}
+  {#each choices as { value, checkboxLabel }, i}
     <Label class={label({ class: classLabel })} for={`checkbox-${i}`}>
-      { checkboxLabel }
-      <input id={`checkbox-${i}`} type="checkbox" value={ value } bind:group {...attributes} 
-      class={base({ class: className })}
+      {checkboxLabel}
+      <input
+        id={`checkbox-${i}`}
+        type="checkbox"
+        {value}
+        bind:group
+        {...attributes}
+        class={base({ class: className })}
       />
       {#if children}
-      {@render children()}
+        {@render children()}
       {/if}
     </Label>
   {/each}
 {:else}
-<Label class={label({ class: classLabel })}>
-  <input
-    type="checkbox"
-    bind:checked
-    aria-describedby={aria_describedby}
-    {indeterminate}
-    {...attributes}
-    class={base({ class: className })}
-  />
-  {#if children}
-    {@render children()}
-  {/if}
-</Label>
+  <Label class={label({ class: classLabel })}>
+    <input
+      type="checkbox"
+      bind:checked
+      aria-describedby={aria_describedby}
+      {indeterminate}
+      {...attributes}
+      class={base({ class: className })}
+    />
+    {#if children}
+      {@render children()}
+    {/if}
+  </Label>
 {/if}
 
 <!--
@@ -63,7 +69,8 @@
 @prop inline
 @prop tinted
 @prop rounded
-@prop group = []
+@prop group = $bindable([])
+@prop choices = []
 @prop checked = $bindable(false)
 @prop spacing
 @prop classLabel

src/lib/forms/checkbox/Checkbox.svelte

@@ -7,8 +7,8 @@ import { type VariantProps } from 'tailwind-variants';
 
 type CheckboxItem = {
   value: string;
-  checkboxLabel?: string; 
-  isChecked?: boolean; 
+  checkboxLabel?: string;
+  isChecked?: boolean;
 };
 
 type ColorType = VariantProps<typeof checkbox>['color'];
@@ -29,4 +29,10 @@ interface CheckboxProps extends HTMLInputAttributes {
   class?: string | undefined | null;
 }
 
-export { Checkbox, checkbox, type CheckboxProps, type CheckboxItem, type ColorType };
+export {
+  Checkbox,
+  checkbox,
+  type CheckboxProps,
+  type CheckboxItem,
+  type ColorType
+};

src/lib/forms/checkbox/index.ts

@@ -1,15 +1,25 @@
 <script lang="ts">
-  import { type FileuploadProps as Props, fileupload } from '.'
-  
+  import { type FileuploadProps as Props, fileupload } from '.';
+
   let {
     files = $bindable(),
     value = $bindable(),
     size = 'md',
-    class: className, 
-    ...attributes 
+    class: className,
+    ...attributes
   }: Props = $props();
   const base = $derived(fileupload({ size, class: className }));
 </script>
 
-<input type="file" bind:files {...attributes} class={base}/>
+<input type="file" bind:files {...attributes} class={base} />
 
+<!--
+@component
+[Go to docs](https://svelte-5-ui-lib.codewithshin.com/)
+## Props
+@prop files = $bindable()
+@prop value = $bindable()
+@prop size = 'md'
+@prop class: className
+@prop ...attributes
+-->

src/lib/forms/fileupload/Fileupload.svelte

@@ -1,6 +1,6 @@
-import Fileupload from "./Fileupload.svelte";
-import type { HTMLInputAttributes } from "svelte/elements";
-import type { InputProps } from '$lib'
+import Fileupload from './Fileupload.svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { InputProps } from '$lib';
 import { fileupload } from './theme';
 
 interface FileuploadProps extends Omit<HTMLInputAttributes, 'size'> {
@@ -10,4 +10,4 @@ interface FileuploadProps extends Omit<HTMLInputAttributes, 'size'> {
   color?: InputProps['color'];
 }
 
-export { Fileupload, fileupload, type FileuploadProps }
+export { Fileupload, fileupload, type FileuploadProps };

src/lib/forms/fileupload/index.ts

@@ -9,4 +9,4 @@ export const fileupload = tv({
       lg: 'sm:text-base ps-11 pe-11 p-3'
     }
   }
-});
+});