Added combobox, accordion and checkbox components

.changeset/plenty-frogs-decide.md

@@ -0,0 +1,5 @@
+---
+'@jeanne-mas/svelte-ui': patch
+---
+
+Added combobox, accordion and checkbox components

package.json

@@ -7,7 +7,7 @@
   "dependencies": {
     "@internationalized/date": "^3.5.2",
     "@melt-ui/svelte": "^0.76.2",
-    "bits-ui": "^0.21.7",
+    "bits-ui": "^0.21.8",
     "clsx": "^2.1.0",
     "cmdk-sv": "^0.0.17",
     "formsnap": "^1.0.0",
@@ -52,6 +52,10 @@
     "vitest": "^1.2.0"
   },
   "exports": {
+    "./components/accordion": {
+      "types": "./dist/components/accordion/index.d.ts",
+      "svelte": "./dist/components/accordion/index.js"
+    },
     "./components/alert": {
       "types": "./dist/components/alert/index.d.ts",
       "svelte": "./dist/components/alert/index.js"
@@ -76,10 +80,18 @@
       "types": "./dist/components/card/index.d.ts",
       "svelte": "./dist/components/card/index.js"
     },
+    "./components/checkbox": {
+      "types": "./dist/components/checkbox/index.d.ts",
+      "svelte": "./dist/components/checkbox/index.js"
+    },
     "./components/collapsible": {
       "types": "./dist/components/collapsible/index.d.ts",
       "svelte": "./dist/components/collapsible/index.js"
     },
+    "./components/combobox": {
+      "types": "./dist/components/combobox/index.d.ts",
+      "svelte": "./dist/components/combobox/index.js"
+    },
     "./components/command": {
       "types": "./dist/components/command/index.d.ts",
       "svelte": "./dist/components/command/index.js"

src/lib/components/accordion/AccordionContent.svelte

@@ -0,0 +1,99 @@
+<script context="module" lang="ts">
+  import { Accordion as AccordionPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { slide } from 'svelte/transition';
+  import { tv } from 'tailwind-variants';
+
+  import type { ComponentInfo, Transition } from '$lib/utils/types.js';
+
+  type Primitive<
+    TContentTransition extends Transition = Transition,
+    TContentTransitionIn extends Transition = Transition,
+    TContentTransitionOut extends Transition = Transition,
+  > = ComponentInfo<
+    AccordionPrimitive.Content<TContentTransition, TContentTransitionIn, TContentTransitionOut>
+  >;
+
+  /**
+   * The attributes of the content.
+   */
+  export type Attributes = SvelteHTMLElements['div'];
+  /**
+   * The props of the content.
+   */
+  export type Props<
+    TContentTransition extends Transition = Transition,
+    TContentTransitionIn extends Transition = Transition,
+    TContentTransitionOut extends Transition = Transition,
+  > = Omit<
+    Primitive<TContentTransition, TContentTransitionIn, TContentTransitionOut>['props'],
+    keyof Attributes
+  >;
+  /**
+   * The slots of the content.
+   */
+  export type Slots<
+    TContentTransition extends Transition = Transition,
+    TContentTransitionIn extends Transition = Transition,
+    TContentTransitionOut extends Transition = Transition,
+  > = Primitive<TContentTransition, TContentTransitionIn, TContentTransitionOut>['slots'];
+
+  /**
+   * The styles of the content.
+   */
+  export const styles = tv({
+    base: ['overflow-hidden p-1 text-sm transition-all'],
+  });
+</script>
+
+<script
+  generics="
+    TContentTransition extends Transition = Transition,
+    TContentTransitionIn extends Transition = Transition,
+    TContentTransitionOut extends Transition = Transition,
+  "
+  lang="ts"
+>
+  type $$Events = Primitive<
+    TContentTransition,
+    TContentTransitionIn,
+    TContentTransitionOut
+  >['events'];
+  type $$Props = Attributes & TypedProps;
+  type $$Slots = Slots<TContentTransition, TContentTransitionIn, TContentTransitionOut>;
+  type TypedProps = Props<TContentTransition, TContentTransitionIn, TContentTransitionOut>;
+
+  export let asChild: TypedProps['asChild'] = undefined;
+  export let el: TypedProps['el'] = undefined;
+  export let inTransition: TypedProps['inTransition'] = undefined;
+  export let inTransitionConfig: TypedProps['inTransitionConfig'] = undefined;
+  export let outTransition: TypedProps['outTransition'] = undefined;
+  export let outTransitionConfig: TypedProps['outTransitionConfig'] = undefined;
+  export let transition: TypedProps['transition'] = slide as TypedProps['transition'];
+  export let transitionConfig: TypedProps['transitionConfig'] = {
+    duration: 200,
+  };
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<AccordionPrimitive.Content
+  {...attributes}
+  asChild="{asChild}"
+  class="{styles({
+    class: attributes.class,
+  })}"
+  el="{el}"
+  inTransition="{inTransition}"
+  inTransitionConfig="{inTransitionConfig}"
+  outTransition="{outTransition}"
+  outTransitionConfig="{outTransitionConfig}"
+  transition="{transition}"
+  transitionConfig="{transitionConfig}"
+  let:builder
+>
+  <slot builder="{builder}" />
+</AccordionPrimitive.Content>

src/lib/components/accordion/AccordionItem.svelte

@@ -0,0 +1,59 @@
+<script context="module" lang="ts">
+  import { Accordion as AccordionPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import type { ComponentInfo } from '$lib/utils/types.js';
+
+  type Primitive = ComponentInfo<AccordionPrimitive.Item>;
+
+  /**
+   * The attributes of the item.
+   */
+  export type Attributes = SvelteHTMLElements['div'];
+  /**
+   * The props of the item.
+   */
+  export type Props = Omit<Primitive['props'], keyof Attributes>;
+  /**
+   * The slots of the item.
+   */
+  export type Slots = Primitive['slots'];
+
+  /**
+   * The styles of the item.
+   */
+  export const styles = tv({
+    base: [''],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Primitive['events'];
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let disabled: Props['disabled'] = undefined;
+  export let el: Props['el'] = undefined;
+  export let value: Props['value'];
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<AccordionPrimitive.Item
+  {...attributes}
+  asChild="{asChild}"
+  class="{styles({
+    class: attributes.class,
+  })}"
+  disabled="{disabled}"
+  el="{el}"
+  value="{value}"
+  let:builder
+>
+  <slot builder="{builder}" />
+</AccordionPrimitive.Item>

src/lib/components/accordion/AccordionRoot.svelte

@@ -0,0 +1,69 @@
+<script context="module" lang="ts">
+  import { Accordion as AccordionPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import type { ComponentInfo } from '$lib/utils/types.js';
+
+  type Primitive<TMultiple extends boolean = false> = ComponentInfo<
+    AccordionPrimitive.Root<TMultiple>
+  >;
+
+  /**
+   * The attributes of the root.
+   */
+  export type Attributes = SvelteHTMLElements['div'];
+  /**
+   * The props of the root.
+   */
+  export type Props<TMultiple extends boolean = false> = Omit<
+    Primitive<TMultiple>['props'],
+    keyof Attributes
+  >;
+  /**
+   * The slots of the root.
+   */
+  export type Slots<TMultiple extends boolean = false> = Primitive<TMultiple>['slots'];
+
+  /**
+   * The styles of the root.
+   */
+  export const styles = tv({
+    base: ['divide-y'],
+  });
+</script>
+
+<script generics="TMultiple extends boolean = false" lang="ts">
+  type $$Events = Primitive<TMultiple>['events'];
+  type $$Props = Attributes & TypedProps;
+  type $$Slots = Slots<TMultiple>;
+  type TypedProps = Props<TMultiple>;
+
+  export let asChild: TypedProps['asChild'] = undefined;
+  export let disabled: TypedProps['disabled'] = undefined;
+  export let el: TypedProps['el'] = undefined;
+  export let multiple: TypedProps['multiple'] = undefined;
+  export let onValueChange: TypedProps['onValueChange'] = undefined;
+  export let value: TypedProps['value'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<AccordionPrimitive.Root
+  {...attributes}
+  asChild="{asChild}"
+  class="{styles({
+    class: attributes.class,
+  })}"
+  disabled="{disabled}"
+  el="{el}"
+  multiple="{multiple}"
+  onValueChange="{onValueChange}"
+  bind:value="{value}"
+  let:builder
+>
+  <slot builder="{builder}" />
+</AccordionPrimitive.Root>

src/lib/components/accordion/AccordionTrigger.svelte

@@ -0,0 +1,73 @@
+<script context="module" lang="ts">
+  import { Accordion as AccordionPrimitive } from 'bits-ui';
+  import ChevronDownIcon from 'lucide-svelte/icons/chevron-down';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import { cn } from '$lib/utils/cn.js';
+  import type { ComponentInfo } from '$lib/utils/types.js';
+
+  type Primitive = ComponentInfo<AccordionPrimitive.Trigger>;
+
+  /**
+   * The attributes of the trigger.
+   */
+  export type Attributes = SvelteHTMLElements['button'];
+  /**
+   * The props of the trigger.
+   */
+  export type Props = Omit<Primitive['props'], keyof Attributes> & {
+    headerAttributesAndProps?: ComponentInfo<AccordionPrimitive.Header>['props'];
+  };
+  /**
+   * The slots of the trigger.
+   */
+  export type Slots = Primitive['slots'];
+
+  /**
+   * The styles of the trigger.
+   */
+  export const styles = tv({
+    base: [
+      'flex flex-1 items-center justify-between py-4 font-medium transition-all',
+      'hover:underline',
+      '[&[data-state=open]>svg]:rotate-180',
+    ],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Primitive['events'];
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+  export let headerAttributesAndProps: Props['headerAttributesAndProps'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<AccordionPrimitive.Header
+  {...headerAttributesAndProps}
+  class="{cn('flex', headerAttributesAndProps?.class)}"
+>
+  <AccordionPrimitive.Trigger
+    {...attributes}
+    asChild="{asChild}"
+    class="{styles({
+      class: attributes.class,
+    })}"
+    el="{el}"
+    let:builder
+    on:click
+    on:keydown
+  >
+    <slot builder="{builder}" />
+
+    <ChevronDownIcon class="h-4 w-4 transition-transform duration-200" />
+  </AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>