Add alert-dialog component and update dependencies

.changeset/calm-falcons-drum.md

@@ -0,0 +1,5 @@
+---
+'@jeanne-mas/svelte-ui': minor
+---
+
+Added alert-dialog component

.husky/pre-commit

@@ -1 +1 @@
-pnpm format && pnpm package
+pnpm format && pnpm package && pnpm check

package.json

@@ -6,6 +6,7 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.5.2",
+    "@melt-ui/svelte": "^0.77.0",
     "bits-ui": "^0.21.3",
     "clsx": "^2.1.0",
     "formsnap": "^1.0.0",
@@ -51,6 +52,10 @@
       "types": "./dist/components/alert/index.d.ts",
       "svelte": "./dist/components/alert/index.js"
     },
+    "./components/alert-dialog": {
+      "types": "./dist/components/alert-dialog/index.d.ts",
+      "svelte": "./dist/components/alert-dialog/index.js"
+    },
     "./components/button": {
       "types": "./dist/components/button/index.d.ts",
       "svelte": "./dist/components/button/index.js"

src/lib/components/alert-dialog/AlertDialogAction.svelte

@@ -0,0 +1,97 @@
+<script context="module" lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  import { styles as buttonStyles } from '$lib/components/button/index.js';
+  import type { ComponentSlots } from '$lib/utils/types.js';
+
+  /**
+   * The attributes of the action.
+   */
+  export type Attributes = SvelteHTMLElements['button'];
+  /**
+   * The props of the action.
+   */
+  export type Props = Omit<AlertDialogPrimitive.ActionProps, keyof Attributes> & {
+    /**
+     * The size of the action.
+     *
+     * @default 'default'
+     */
+    size?: Size;
+    /**
+     * The variant of the action.
+     *
+     * @default 'default'
+     */
+    variant?: Variant;
+  };
+  /**
+   * The size of the action.
+   */
+  export type Size = NonNullable<VariantProps<typeof styles>['size']>;
+  /**
+   * The slots of the action.
+   */
+  export type Slots = ComponentSlots<AlertDialogPrimitive.Action>;
+  /**
+   * The variant of the action.
+   */
+  export type Variant = NonNullable<VariantProps<typeof styles>['variant']>;
+
+  /**
+   * The styles of the action.
+   */
+  export const styles = tv({
+    ...buttonStyles,
+  });
+  /**
+   * The default size of the action.
+   */
+  export const defaultSize = styles.defaultVariants.size!;
+  /**
+   * The default variant of the action.
+   */
+  export const defaultVariant = styles.defaultVariants.variant!;
+  /**
+   * The sizes of the action.
+   */
+  export const sizes = Object.keys(styles.variants.size) as [Size, ...Size[]];
+  /**
+   * The variants of the action.
+   */
+  export const variants = Object.keys(styles.variants.variant) as [Variant, ...Variant[]];
+</script>
+
+<script lang="ts">
+  type $$Events = AlertDialogPrimitive.ActionEvents;
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+  export let size: Props['size'] = undefined;
+  export let variant: Props['variant'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<AlertDialogPrimitive.Action
+  {...attributes}
+  asChild="{asChild}"
+  class="{styles({
+    class: attributes.class,
+    size,
+    variant,
+  })}"
+  el="{el}"
+  let:builder
+  on:click
+  on:keydown
+>
+  <slot builder="{builder}" />
+</AlertDialogPrimitive.Action>

src/lib/components/alert-dialog/AlertDialogCancel.svelte

@@ -0,0 +1,101 @@
+<script context="module" lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  import { styles as buttonStyles } from '$lib/components/button/index.js';
+  import type { ComponentSlots } from '$lib/utils/types.js';
+
+  /**
+   * The attributes of the cancel.
+   */
+  export type Attributes = SvelteHTMLElements['button'];
+  /**
+   * The props of the cancel.
+   */
+  export type Props = Omit<AlertDialogPrimitive.CancelProps, keyof Attributes> & {
+    /**
+     * The size of the cancel.
+     *
+     * @default 'default'
+     */
+    size?: Size;
+    /**
+     * The variant of the cancel.
+     *
+     * @default 'outline'
+     */
+    variant?: Variant;
+  };
+  /**
+   * The size of the cancel.
+   */
+  export type Size = NonNullable<VariantProps<typeof styles>['size']>;
+  /**
+   * The slots of the cancel.
+   */
+  export type Slots = ComponentSlots<AlertDialogPrimitive.Cancel>;
+  /**
+   * The variant of the cancel.
+   */
+  export type Variant = NonNullable<VariantProps<typeof styles>['variant']>;
+
+  /**
+   * The styles of the cancel.
+   */
+  export const styles = tv({
+    ...buttonStyles,
+    defaultVariants: {
+      ...buttonStyles.defaultVariants,
+      variant: 'outline',
+    },
+  });
+  /**
+   * The default size of the cancel.
+   */
+  export const defaultSize = styles.defaultVariants.size!;
+  /**
+   * The default variant of the cancel.
+   */
+  export const defaultVariant = styles.defaultVariants.variant!;
+  /**
+   * The sizes of the cancel.
+   */
+  export const sizes = Object.keys(styles.variants.size) as [Size, ...Size[]];
+  /**
+   * The variants of the cancel.
+   */
+  export const variants = Object.keys(styles.variants.variant) as [Variant, ...Variant[]];
+</script>
+
+<script lang="ts">
+  type $$Events = AlertDialogPrimitive.CancelEvents;
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+  export let size: Props['size'] = undefined;
+  export let variant: Props['variant'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<AlertDialogPrimitive.Cancel
+  {...attributes}
+  asChild="{asChild}"
+  class="{styles({
+    class: attributes.class,
+    size,
+    variant,
+  })}"
+  el="{el}"
+  let:builder
+  on:click
+  on:keydown
+>
+  <slot builder="{builder}" />
+</AlertDialogPrimitive.Cancel>

src/lib/components/alert-dialog/AlertDialogContent.svelte

@@ -0,0 +1,94 @@
+<script context="module" lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import { flyAndScale } from '$lib/transition/flyAndScale.js';
+  import type { ComponentSlots, Transition } from '$lib/utils/types.js';
+
+  import * as AlertDialog from './index.js';
+
+  /**
+   * The attributes of the content.
+   */
+  export type Attributes = SvelteHTMLElements['div'];
+  /**
+   * The props of the content.
+   */
+  export type Props<
+    TTransition extends Transition = Transition,
+    TTransitionIn extends Transition = Transition,
+    TTransitionOut extends Transition = Transition,
+  > = Omit<
+    AlertDialogPrimitive.ContentProps<TTransition, TTransitionIn, TTransitionOut>,
+    keyof Attributes
+  >;
+  /**
+   * The slots of the content.
+   */
+  export type Slots<
+    TTransition extends Transition = Transition,
+    TTransitionIn extends Transition = Transition,
+    TTransitionOut extends Transition = Transition,
+  > = ComponentSlots<AlertDialogPrimitive.Content<TTransition, TTransitionIn, TTransitionOut>>;
+
+  /**
+   * The styles of the content.
+   */
+  export const styles = tv({
+    base: [
+      'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border bg-background p-6 shadow-lg',
+    ],
+  });
+</script>
+
+<script
+  generics="
+    TTransition extends Transition = Transition,
+    TTransitionIn extends Transition = Transition,
+    TTransitionOut extends Transition = Transition,
+  "
+  lang="ts"
+>
+  type $$Events = Record<never, never>;
+  type $$Props = Attributes & TypedProps;
+  type $$Slots = TypedSlots;
+  type TypedProps = Props<TTransition, TTransitionIn, TTransitionOut>;
+  type TypedSlots = Slots<TTransition, TTransitionIn, TTransitionOut>;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+  export let inTransition: Props['inTransition'] = undefined;
+  export let inTransitionConfig: Props['inTransitionConfig'] = undefined;
+  export let outTransition: Props['outTransition'] = undefined;
+  export let outTransitionConfig: Props['outTransitionConfig'] = undefined;
+  export let transition: Props['transition'] = flyAndScale as Props['transition'];
+  export let transitionConfig: Props['transitionConfig'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<AlertDialog.Portal>
+  <AlertDialog.Overlay />
+
+  <AlertDialogPrimitive.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}" />
+  </AlertDialogPrimitive.Content>
+</AlertDialog.Portal>