feat(drawer): add transitions (#60)

.changeset/wet-pugs-dance.md

@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+Add transitions to the drawer component

apps/docs/package.json

@@ -23,7 +23,7 @@
     "chart.js": "^4.4.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "corvu": "^0.3.0",
+    "corvu": "^0.4.0",
     "shosho": "^1.4.3",
     "solid-icons": "^1.0.12",
     "solid-js": "1.7.12",

apps/docs/public/registry/ui/drawer.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "drawer.tsx",
-      "content": "import type { Component, ComponentProps } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as DrawerPrimitive from \"corvu/drawer\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst Drawer = DrawerPrimitive.Root\n\nconst DrawerTrigger = DrawerPrimitive.Trigger\n\nconst DrawerPortal = DrawerPrimitive.Portal\n\nconst DrawerClose = DrawerPrimitive.Close\n\nconst DrawerOverlay: Component<DrawerPrimitive.OverlayProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return (\n    <DrawerPrimitive.Overlay class={cn(\"fixed inset-0 z-50 bg-black/80\", props.class)} {...rest} />\n  )\n}\n\nconst DrawerContent: Component<DrawerPrimitive.ContentProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\", \"children\"])\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        class={cn(\n          \"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border\",\n          props.class\n        )}\n        {...rest}\n      >\n        <div class=\"bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full\" />\n        {props.children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nconst DrawerHeader: Component<ComponentProps<\"div\">> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return <div class={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", props.class)} {...rest} />\n}\n\nconst DrawerFooter: Component<ComponentProps<\"div\">> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return <div class={cn(\"t-auto flex flex-col gap-2 p-4\", props.class)} {...rest} />\n}\n\nconst DrawerTitle: Component<DrawerPrimitive.LabelProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return (\n    <DrawerPrimitive.Label\n      class={cn(\"text-lg font-semibold leading-none tracking-tight\", props.class)}\n      {...rest}\n    />\n  )\n}\n\nconst DrawerDescription: Component<DrawerPrimitive.DescriptionProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return (\n    <DrawerPrimitive.Description\n      class={cn(\"text-muted-foreground text-sm\", props.class)}\n      {...rest}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription\n}\n"
+      "content": "import type { Component, ComponentProps } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as DrawerPrimitive from \"corvu/drawer\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst Drawer = DrawerPrimitive.Root\n\nconst DrawerTrigger = DrawerPrimitive.Trigger\n\nconst DrawerPortal = DrawerPrimitive.Portal\n\nconst DrawerClose = DrawerPrimitive.Close\n\nconst DrawerOverlay: Component<DrawerPrimitive.OverlayProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  const drawerContext = DrawerPrimitive.useContext()\n  return (\n    <DrawerPrimitive.Overlay\n      class={cn(\n        \"fixed inset-0 z-50 data-[transitioning]:transition-colors data-[transitioning]:duration-300\",\n        props.class\n      )}\n      style={{\n        'background-color': `rgb(0 0 0 / ${0.8 * drawerContext.openPercentage()})`,\n      }}\n      {...rest}\n    />\n  )\n}\n\nconst DrawerContent: Component<DrawerPrimitive.ContentProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\", \"children\"])\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        class={cn(\n          \"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border data-[transitioning]:transition-transform data-[transitioning]:duration-300 md:select-none\",\n          props.class\n        )}\n        {...rest}\n      >\n        <div class=\"bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full\" />\n        {props.children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nconst DrawerHeader: Component<ComponentProps<\"div\">> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return <div class={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", props.class)} {...rest} />\n}\n\nconst DrawerFooter: Component<ComponentProps<\"div\">> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return <div class={cn(\"t-auto flex flex-col gap-2 p-4\", props.class)} {...rest} />\n}\n\nconst DrawerTitle: Component<DrawerPrimitive.LabelProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return (\n    <DrawerPrimitive.Label\n      class={cn(\"text-lg font-semibold leading-none tracking-tight\", props.class)}\n      {...rest}\n    />\n  )\n}\n\nconst DrawerDescription: Component<DrawerPrimitive.DescriptionProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return (\n    <DrawerPrimitive.Description\n      class={cn(\"text-muted-foreground text-sm\", props.class)}\n      {...rest}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription\n}\n"
     }
   ],
   "type": "ui"

apps/docs/src/registry/example/drawer-demo.tsx

@@ -1,6 +1,5 @@
 import { createSignal } from "solid-js"
 
-import { As } from "corvu"
 import { TbMinus, TbPlus } from "solid-icons/tb"
 
 import { Button } from "~/registry/ui/button"
@@ -24,10 +23,8 @@ export default function DrawerDemo() {
 
   return (
     <Drawer>
-      <DrawerTrigger asChild>
-        <As component={Button} variant="outline">
-          Open Drawer
-        </As>
+      <DrawerTrigger as={Button} variant="outline">
+        Open Drawer
       </DrawerTrigger>
       <DrawerContent>
         <div class="mx-auto w-full max-w-sm">
@@ -65,10 +62,8 @@ export default function DrawerDemo() {
           </div>
           <DrawerFooter>
             <Button>Submit</Button>
-            <DrawerClose asChild>
-              <As component={Button} variant="outline">
-                Cancel
-              </As>
+            <DrawerClose as={Button} variant="outline">
+              Cancel
             </DrawerClose>
           </DrawerFooter>
         </div>

apps/docs/src/registry/ui/drawer.tsx

@@ -15,8 +15,18 @@ const DrawerClose = DrawerPrimitive.Close
 
 const DrawerOverlay: Component<DrawerPrimitive.OverlayProps> = (props) => {
   const [, rest] = splitProps(props, ["class"])
+  const drawerContext = DrawerPrimitive.useContext()
   return (
-    <DrawerPrimitive.Overlay class={cn("fixed inset-0 z-50 bg-black/80", props.class)} {...rest} />
+    <DrawerPrimitive.Overlay
+      class={cn(
+        "fixed inset-0 z-50 data-[transitioning]:transition-colors data-[transitioning]:duration-300",
+        props.class
+      )}
+      style={{
+        'background-color': `rgb(0 0 0 / ${0.8 * drawerContext.openPercentage()})`,
+      }}
+      {...rest}
+    />
   )
 }
 
@@ -27,7 +37,7 @@ const DrawerContent: Component<DrawerPrimitive.ContentProps> = (props) => {
       <DrawerOverlay />
       <DrawerPrimitive.Content
         class={cn(
-          "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
+          "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border data-[transitioning]:transition-transform data-[transitioning]:duration-300 md:select-none",
           props.class
         )}
         {...rest}