docs: inline park preset

Author: segunadebayo

packages/react/src/components/drawer/examples/multiple-triggers.tsx

@@ -22,6 +22,7 @@ export const MultipleTriggers = () => {
 
   return (
     <Drawer.Root
+      swipeDirection="end"
       onTriggerValueChange={(e) => {
         setActiveUser(users.find((u) => u.id === e.value) ?? null)
       }}

packages/solid/src/components/drawer/examples/multiple-triggers.tsx

@@ -22,6 +22,7 @@ export const MultipleTriggers = () => {
 
   return (
     <Drawer.Root
+      swipeDirection="end"
       onTriggerValueChange={(e) => {
         setActiveUser(users.find((u) => u.id === e.value) ?? null)
       }}

packages/svelte/src/lib/components/drawer/examples/multiple-triggers.svelte

@@ -21,6 +21,7 @@
 </script>
 
 <Drawer.Root
+  swipeDirection="end"
   onTriggerValueChange={(e) => {
     activeUser = users.find((u) => u.id === e.value) ?? null
   }}

packages/vue/src/components/drawer/examples/multiple-triggers.vue

@@ -22,7 +22,10 @@ const activeUser = ref<User | null>(null)
 </script>
 
 <template>
-  <Drawer.Root @trigger-value-change="(e) => (activeUser = users.find((u) => u.id === e.value) ?? null)">
+  <Drawer.Root
+    swipe-direction="end"
+    @trigger-value-change="(e) => (activeUser = users.find((u) => u.id === e.value) ?? null)"
+  >
     <div :class="button.Group">
       <Drawer.Trigger v-for="user in users" :key="user.id" :value="user.id" :class="button.Root">
         Edit {{ user.name }}

website/panda.config.ts

@@ -1,16 +1,12 @@
 import { defineConfig } from '@pandacss/dev'
-import { createPreset } from '@park-ui/panda-preset'
-import sand from '@park-ui/panda-preset/colors/sand'
 import typographyPreset from 'pandacss-preset-typography'
-import { coral } from '~/coral'
-import { field } from '~/theme/recipes/field'
-import { tour } from '~/theme/recipes/tour'
+import { parkPreset } from '~/theme'
 
 export default defineConfig({
   preflight: true,
   validation: 'none',
   presets: [
-    createPreset({ grayColor: sand, accentColor: coral, radius: 'sm' }),
+    parkPreset,
     typographyPreset({
       recipe: {
         sizes: ['base'],
@@ -49,130 +45,4 @@ export default defineConfig({
       tour: ['*'],
     },
   },
-  globalCss: {
-    extend: {
-      html: {
-        scrollPaddingTop: '6rem',
-        minHeight: '100%',
-      },
-      'html, body': {
-        display: 'flex',
-        flexDirection: 'column',
-      },
-      body: {
-        display: 'flex',
-        flexDirection: 'column',
-        flexGrow: '1',
-        fontFamily: 'body',
-      },
-      '*::selection': {
-        bg: 'gray.3',
-      },
-      pre: {
-        overflowX: 'auto',
-        fontSize: '13px !important',
-        bg: 'gray.dark.2!',
-        lineHeight: '1.5!',
-      },
-      blockquote: {
-        fontStyle: 'normal!',
-        fontWeight: 'normal!',
-      },
-      strong: {
-        color: 'fg.default!',
-      },
-      code: {
-        fontFamily: 'code!',
-        '::selection': {
-          bg: 'gray.dark.a4',
-        },
-      },
-      article: {
-        '--colors-prose-body': 'colors.fg.muted',
-        '--colors-prose-heading': 'colors.fg.default',
-        '--colors-prose-bold': 'colors.fg.default',
-        '--colors-prose-link': 'colors.fg.default',
-        '--colors-prose-code': 'colors.fg.muted',
-        '--colors-prose-hr-border': 'colors.border.subtle',
-        '--colors-prose-quote-border': 'colors.accent.default',
-      },
-    },
-  },
-  theme: {
-    extend: {
-      tokens: {
-        fonts: {
-          body: { value: 'var(--font-wix-madefor-text), sans-serif' },
-          code: { value: 'var(--font-roboto-mono), monospace' },
-        },
-      },
-      keyframes: {
-        marqueeX: {
-          from: {
-            transform: 'translateX(0%)',
-          },
-          to: {
-            transform: 'translateX(var(--marquee-translate))',
-          },
-        },
-        marqueeY: {
-          from: {
-            transform: 'translateY(0%)',
-          },
-          to: {
-            transform: 'translateY(var(--marquee-translate))',
-          },
-        },
-        'scale-in': {
-          from: { transform: 'scale(0)' },
-          to: { transform: 'scale(1)' },
-        },
-        'scale-out': {
-          from: { transform: 'scale(1)' },
-          to: { transform: 'scale(0)' },
-        },
-      },
-      slotRecipes: {
-        field,
-        tour,
-        layout: {
-          className: 'layout',
-          slots: ['aside', 'main'],
-          base: {
-            aside: {
-              bg: {
-                base: 'gray.2',
-                _dark: '#0e0e0e',
-              },
-              borderRightWidth: '1px',
-              position: 'fixed',
-              top: '0',
-              bottom: '0',
-              display: { base: 'none', md: 'block' },
-              ps: 'max(32px, calc((100vw - (1440px - 64px)) / 2))',
-              pe: '8',
-              pb: '10',
-              minWidth: '272px',
-              overflow: 'auto',
-              overscrollBehavior: 'contain',
-              width: {
-                base: '272px',
-                lg: 'calc((100vw - (1440px - 64px)) / 2 + 272px - 32px)',
-              },
-              zIndex: '2',
-            },
-            main: {
-              minWidth: '0',
-              flex: '1',
-              ps: {
-                base: '0',
-                md: 'max(calc((100vw - 1440px) / 2 + 272px), 272px)',
-              },
-              pe: 'calc((100vw - 1440px) / 2)',
-            },
-          },
-        },
-      },
-    },
-  },
 })

website/src/components/key-bindings-table.tsx

@@ -8,7 +8,12 @@ interface Props {
 }
 
 export const KeyBindingsTable = (props: Props) => {
-  const { keyboard } = getAccessibilityDoc(props.id)
+  let keyboard: ReturnType<typeof getAccessibilityDoc>['keyboard']
+  try {
+    keyboard = getAccessibilityDoc(props.id).keyboard
+  } catch {
+    return null
+  }
 
   return (
     <Box borderWidth="1px" borderRadius="lg" overflowX="auto" className="not-prose">

website/src/components/navigation/mobile-sidebar-container.tsx

@@ -17,7 +17,7 @@ export const MobileSidebarContainer = (props: PropsWithChildren) => {
   }, [pathname])
 
   return (
-    <Drawer.Root open={isOpen} onOpenChange={(e) => setIsOpen(e.open)} variant="left">
+    <Drawer.Root open={isOpen} onOpenChange={(e) => setIsOpen(e.open)} swipeDirection="start">
       <Drawer.Trigger asChild>
         <IconButton aria-label="Open Sidebar" variant="link" size="sm" minH="8">
           <AlignLeftIcon />

website/src/components/navigation/navbar-container.tsx

@@ -11,6 +11,7 @@ export const NavbarContainer = (props: BoxProps) => {
       zIndex="2"
       borderBottomWidth="1px"
       borderColor={{ _light: 'border.subtle', _dark: 'black' }}
+      pe="var(--scrollbar-width, 0)"
     >
       <Container py="2.5" {...props} />
     </Flex>

website/src/components/ui/primitives/drawer.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { Assign, PolymorphicProps } from '@ark-ui/react'
-import { Dialog } from '@ark-ui/react/dialog'
+import { Drawer } from '@ark-ui/react/drawer'
 import { ark } from '@ark-ui/react/factory'
 import { type DrawerVariantProps, drawer } from 'styled-system/recipes'
 import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
@@ -9,45 +9,45 @@ import { createStyleContext } from '~/lib/create-style-context'
 const { withRootProvider, withContext } = createStyleContext(drawer)
 
 export type RootProviderProps = ComponentProps<typeof RootProvider>
-export const RootProvider = withRootProvider<Assign<Dialog.RootProviderBaseProps, DrawerVariantProps>>(
-  Dialog.RootProvider,
+export const RootProvider = withRootProvider<Assign<Drawer.RootProviderBaseProps, DrawerVariantProps>>(
+  Drawer.RootProvider,
 )
 
 export type RootProps = ComponentProps<typeof Root>
-export const Root = withRootProvider<Assign<Dialog.RootProps, DrawerVariantProps>>(Dialog.Root)
+export const Root = withRootProvider<Assign<Drawer.RootProps, DrawerVariantProps>>(Drawer.Root)
 
-export const Backdrop = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, Dialog.BackdropBaseProps>>(
-  Dialog.Backdrop,
+export const Backdrop = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, Drawer.BackdropBaseProps>>(
+  Drawer.Backdrop,
   'backdrop',
 )
 
 export const CloseTrigger = withContext<
   HTMLButtonElement,
-  Assign<HTMLStyledProps<'button'>, Dialog.CloseTriggerBaseProps>
->(Dialog.CloseTrigger, 'closeTrigger')
+  Assign<HTMLStyledProps<'button'>, Drawer.CloseTriggerBaseProps>
+>(Drawer.CloseTrigger, 'closeTrigger')
 
-export const Content = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, Dialog.ContentBaseProps>>(
-  Dialog.Content,
+export const Content = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, Drawer.ContentBaseProps>>(
+  Drawer.Content,
   'content',
 )
 
-export const Description = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, Dialog.DescriptionBaseProps>>(
-  Dialog.Description,
+export const Description = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, Drawer.DescriptionBaseProps>>(
+  Drawer.Description,
   'description',
 )
 
-export const Positioner = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, Dialog.PositionerBaseProps>>(
-  Dialog.Positioner,
+export const Positioner = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, Drawer.PositionerBaseProps>>(
+  Drawer.Positioner,
   'positioner',
 )
 
-export const Title = withContext<HTMLHeadingElement, Assign<HTMLStyledProps<'h2'>, Dialog.TitleBaseProps>>(
-  Dialog.Title,
+export const Title = withContext<HTMLHeadingElement, Assign<HTMLStyledProps<'h2'>, Drawer.TitleBaseProps>>(
+  Drawer.Title,
   'title',
 )
 
-export const Trigger = withContext<HTMLButtonElement, Assign<HTMLStyledProps<'button'>, Dialog.TriggerBaseProps>>(
-  Dialog.Trigger,
+export const Trigger = withContext<HTMLButtonElement, Assign<HTMLStyledProps<'button'>, Drawer.TriggerBaseProps>>(
+  Drawer.Trigger,
   'trigger',
 )
 
@@ -57,4 +57,31 @@ export const Body = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, P
 
 export const Footer = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, PolymorphicProps>>(ark.div, 'footer')
 
-export const Context = Dialog.Context
+export const Grabber = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, Drawer.GrabberBaseProps>>(
+  Drawer.Grabber,
+  'grabber',
+)
+
+export const GrabberIndicator = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<'div'>, Drawer.GrabberIndicatorBaseProps>
+>(Drawer.GrabberIndicator, 'grabberIndicator')
+
+export const Indent = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, Drawer.IndentBaseProps>>(
+  Drawer.Indent,
+  'indent',
+)
+
+export const IndentBackground = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<'div'>, Drawer.IndentBackgroundBaseProps>
+>(Drawer.IndentBackground, 'indentBackground')
+
+export const SwipeArea = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, Drawer.SwipeAreaBaseProps>>(
+  Drawer.SwipeArea,
+  'swipeArea',
+)
+
+export const Stack = Drawer.Stack
+
+export const Context = Drawer.Context

website/src/content/pages/components/drawer.mdx

@@ -61,7 +61,7 @@ Use the `open` and `onOpenChange` props to control the drawer state.
 
 ### No Drag Area
 
-Use `Drawer.NoDragArea` to prevent dragging on specific elements inside the drawer.
+Apply the `data-no-drag` attribute to any element inside the drawer to prevent dragging from starting on it.
 
 <Example id="no-drag-area" />
 
@@ -157,4 +157,6 @@ the dampened movement reveals this extension instead of an empty gap.
 
 ## Accessibility
 
-<KeyBindingsTable id="drawer" />
+Complies with the [Dialog WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).
+
+<KeyBindingsTable id="dialog" />