Api revamp (#11)

README.md

@@ -13,7 +13,7 @@ npm install ui-ingredients
 ## Usage
 
 ```svelte
-<script>
+<script lang="ts">
   import {Dialog, Portal} from 'ui-ingredients';
   import {XCloseIcon, Button} from '$lib';
 </script>

docs/accordion.md

@@ -5,7 +5,7 @@ A toggle component for expanding and collapsing sections of content.
 ## Usage
 
 ```svelte
-<script>
+<script lang="ts">
   import {Accordion} from 'ui-ingredients';
   import {ChevronDownIcon} from '$lib/icons';
 
@@ -27,8 +27,7 @@ A toggle component for expanding and collapsing sections of content.
     },
   ];
 
-  /** @type {string} */
-  let value = $state([]);
+  let value: string[] = $state([]);
 </script>
 
 <Accordion.Root
@@ -55,57 +54,3 @@ A toggle component for expanding and collapsing sections of content.
   {/each}
 </Accordion.Root>
 ```
-
-## Props
-
-### Root
-
-- `ids`
-
-  The ids of the elements
-
-- `value`
-
-  The `value` of the accordion items that are currently being expanded.
-
-- `disabled`
-
-  Whether the accordion items are disabled
-
-- `multiple`
-
-  Whether multple accordion items can be expanded at the same time.
-
-- `orientation`
-
-  The orientation of the accordion items.
-
-- `collapsible`
-
-  Whether an accordion item can be closed after it has been expanded.
-
-- `onFocusChange`
-
-  The callback fired when the focused accordion item changes.
-
-- `onValueChange`
-
-  The callback fired when the state of expanded/collapsed accordion items changes.
-
-- `lazyMount`
-
-  Should the item be mounted only when expanded?
-
-- `keepMounted`
-
-  Should the item stays in the DOM when it is not expanded?
-
-### Item
-
-- `value`
-
-  The value of the accordion item.
-
-- `disabled`
-
-  Whether the accordion item is disabled.

docs/alert.md

@@ -5,7 +5,7 @@ A component for displaying important messages or notifications.
 ## Usage
 
 ```svelte
-<script>
+<script lang="ts">
   import {Alert} from 'ui-ingredients';
   import {AlertCircleIcon} from '$lib/icons';
 </script>

docs/aschild.md

@@ -5,7 +5,7 @@ The `asChild` prop lets you render a custom component to ensure consistent styli
 ## Usage
 
 ```svelte
-<script>
+<script lang="ts">
   import {Button} from '$lib/ui';
   import {Dialog} from 'ui-ingredients';
 </script>
@@ -24,7 +24,7 @@ In this example, the `asChild` prop allows the `Button` to be used as the trigge
 In some components, you also need to delegate the `action` apart from `attrs` for the component to work properly. See below:
 
 ```svelte
-<script>
+<script lang="ts">
   import {Accordion} from 'ui-ingredients';
   import {ChevronDownIcon} from '@untitled-theme/icons-svelte';
 

docs/avatar.md

@@ -5,7 +5,7 @@ A visual component for displaying a user’s profile image or initials.
 ## Usage
 
 ```svelte
-<script>
+<script lang="ts">
   import {Avatar} from 'ui-ingredients';
 </script>
 
@@ -14,15 +14,3 @@ A visual component for displaying a user’s profile image or initials.
   <Avatar.Fallback>JD</Avatar.Fallback>
 </Avatar.Root>
 ```
-
-## Props
-
-### Root
-
-- `ids`
-
-  The ids of the elements
-
-- `onStatusChange`
-
-  Function called when the image loading status changes.

docs/breadcrumbs.md

@@ -5,7 +5,7 @@ A component for displaying the navigation path or hierarchy of a user's location
 ## Usage
 
 ```svelte
-<script>
+<script lang="ts">
   import {Breadcrumbs} from 'ui-ingredients';
   import {ChevronRightIcon} from '$lib/icons';
 </script>

docs/carousel.md

@@ -5,7 +5,7 @@ A rotating component for cycling through images or content slides.
 ## Usage
 
 ```svelte
-<script>
+<script lang="ts">
   import {Carousel} from 'ui-ingredients';
   import {ChevronLeftIcon, ChevronRightIcon} from '$lib/icons';
 
@@ -51,51 +51,3 @@ A rotating component for cycling through images or content slides.
   </div>
 </Carousel.Root>
 ```
-
-## Props
-
-### Root
-
-- `ids`
-
-  The ids of the elements
-
-- `loop`
-
-  Whether the carousel should loop around.
-
-- `align`
-
-  The alignment of the slides in the carousel.
-
-- `index`
-
-  The current slide index.
-
-- `spacing`
-
-  The amount of space between slides.
-
-- `orientation`
-
-  The orientation of the carousel.
-
-- `slidesPerView`
-
-  The number of slides to show at a time.
-
-- `onIndexChange`
-
-  Function called when the slide changes.
-
-### Item
-
-- `index`
-
-  The index of the item.
-
-### Indicator
-
-- `index`
-
-  The index of the indicator.

docs/checkbox.md

@@ -5,7 +5,7 @@ An interactive component for selecting one or multiple options in a list.
 ## Usage
 
 ```svelte
-<script>
+<script lang="ts">
   import {Checkbox} from 'ui-ingredients';
   import {CheckIcon} from '$lib/icons';
 
@@ -31,7 +31,7 @@ An interactive component for selecting one or multiple options in a list.
 ### Using the `Field` component
 
 ```svelte
-<script>
+<script lang="ts">
   import {Checkbox, Field} from 'ui-ingredients';
   import {CheckIcon} from '$lib/icons';
 </script>
@@ -51,47 +51,3 @@ An interactive component for selecting one or multiple options in a list.
   <Field.ErrorText>This is an error text</Field.ErrorText>
 </Field.Root>
 ```
-
-## Props
-
-### Root
-
-- `ids`
-
-  The ids of the elements
-
-- `form`
-
-  The id of the form that the checkbox belongs to.
-
-- `name`
-
-  The name of the input field in a checkbox.
-
-- `value`
-
-  The value of checkbox input. Useful for form submission.
-
-- `checked`
-
-  The checked state of the checkbox
-
-- `invalid`
-
-  Whether the checkbox is invalid
-
-- `disabled`
-
-  Whether the checkbox is disabled
-
-- `readOnly`
-
-  Whether the checkbox is read-only
-
-- `required`
-
-  Whether the checkbox is required
-
-- `onCheckedChange`
-
-  The callback invoked when the checked state changes.

docs/clipboard.md

@@ -5,7 +5,7 @@ A component for copying text or content to the user's clipboard.
 ## Usage
 
 ```svelte
-<script>
+<script lang="ts">
   import {Clipboard} from 'ui-ingredients';
   import {CheckIcon, Copy01Icon} from '$lib/icons';
 </script>
@@ -27,15 +27,3 @@ A component for copying text or content to the user's clipboard.
   </Clipboard.Control>
 </Clipboard.Root>
 ```
-
-## Props
-
-### Root
-
-- `ids`
-
-- `value`
-
-- `timeout`
-
-- `onStatusChange`

docs/collapsible.md

@@ -5,7 +5,7 @@ A component that expands or collapses to show or hide content.
 ## Usage
 
 ```svelte
-<script>
+<script lang="ts">
   import {Collapsible} from 'ui-ingredients';
 </script>
 

docs/color-picker.md

@@ -5,12 +5,19 @@ A component for selecting and customizing colors.
 ## Usage
 
 ```svelte
-<script>
-  import {ColorPicker} from 'ui-ingredients';
+<script lang="ts">
+  import {ColorPicker, type Color} from 'ui-ingredients';
   import {DropperIcon} from '$lib/icons';
+
+  let value: Color = $state(ColorPicker.parse('red'));
 </script>
 
-<ColorPicker.Root>
+<ColorPicker.Root
+  {value}
+  onValueChange={function (detail) {
+    value = detail.value;
+  }}
+>
   {#snippet children(context)}
     <ColorPicker.Label>Label</ColorPicker.Label>
     <ColorPicker.Control>