refactor(styled modal): use tailwindcss-animate

Author: maiieul

.changeset/warm-dots-melt.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/styled': patch
+---
+
+REFACTOR styled modal: use tailwindcss-animate

packages/kit-styled/src/components/modal/modal.tsx

@@ -1,43 +1,29 @@
-import {
-  PropsOf,
-  Signal,
-  Slot,
-  component$,
-  createContextId,
-  useContextProvider,
-  useSignal,
-} from '@builder.io/qwik';
+import { PropsOf, Slot, component$ } from '@builder.io/qwik';
 import { Modal as HeadlessModal } from '@qwik-ui/headless';
 import { cn } from '@qwik-ui/utils';
 
-const Context = createContextId<Signal<boolean>>('modal-context');
+const Root = HeadlessModal.Root;
 
-const Root = component$<PropsOf<typeof HeadlessModal.Root>>(({ ...props }) => {
-  const showSig = useSignal(false);
-  useContextProvider(Context, showSig);
-  return (
-    <HeadlessModal.Root bind:show={showSig} {...props}>
-      <Slot />
-    </HeadlessModal.Root>
-  );
-});
+const Trigger = HeadlessModal.Trigger;
 
-const Panel = component$(() => {
+const Close = HeadlessModal.Close;
+
+const Panel = component$<PropsOf<typeof HeadlessModal.Panel>>((props) => {
   return (
-    <HeadlessModal.Panel class="max-w-sm rounded-base border border-white bg-background p-6 text-foreground shadow-md transition-all duration-300 backdrop:brightness-50 backdrop:backdrop-blur-sm backdrop:transition-all backdrop:duration-300 data-[state=open]:appear data-[state=closed]:disappear backdrop:data-[state=open]:appear backdrop:data-[state=closed]:disappear">
+    <HeadlessModal.Panel
+      {...props}
+      class={cn(
+        'max-w-sm rounded-base border bg-background p-6 text-foreground shadow-md backdrop:brightness-50 backdrop:backdrop-blur-sm',
+        'data-[closed]:duration-300 data-[open]:duration-300 data-[open]:animate-in data-[closing]:animate-out data-[closing]:fade-out data-[open]:fade-in',
+        'backdrop:data-[closed]:duration-300 backdrop:data-[open]:duration-300 backdrop:data-[open]:animate-in backdrop:data-[closing]:animate-out backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
+        props.class,
+      )}
+    >
       <Slot />
     </HeadlessModal.Panel>
   );
 });
 
-const Trigger = component$<PropsOf<typeof HeadlessModal.Trigger>>(({ ...props }) => {
-  return (
-    <HeadlessModal.Trigger>
-      <Slot {...props} />
-    </HeadlessModal.Trigger>
-  );
-});
-
 const Title = component$<PropsOf<'h2'>>(({ ...props }) => {
   return (
     <HeadlessModal.Title
@@ -59,9 +45,9 @@ const Description = component$<PropsOf<'p'>>(({ ...props }) => {
 
 export const Modal = {
   Root,
-  Panel,
   Trigger,
+  Close,
+  Panel,
   Title,
   Description,
-  Context,
 };