@hanzo/ui 3.0.3 → 3.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -65,7 +65,8 @@
     "react-intersection-observer": "^9.7.0",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.6",
-    "tailwindcss-interaction-media": "^0.1.0"
+    "tailwindcss-interaction-media": "^0.1.0",
+    "vaul": "^0.2.0"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^3.3.2",

package/primitives/drawer.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+
+import { cn } from '../util'
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = 'Drawer'
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+const DrawerPortal = DrawerPrimitive.Portal
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn('fixed inset-0 z-20 bg-background', className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed inset-x-0 bottom-0 z-20 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        className
+      )}
+      {...props}
+    >
+      <div className='mx-auto mt-4 h-2 w-[100px] rounded-full bg-level-1' />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = 'DrawerContent'
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = 'DrawerHeader'
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = 'DrawerFooter'
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted', className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

package/primitives/index.ts

@@ -25,6 +25,20 @@ export {
   DialogDescription,
 } from './dialog'
 
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+} from './drawer'
+
+
 export {
   useFormField,
   Form,

package/primitives/sheet.tsx

@@ -54,14 +54,14 @@ interface SheetContentProps
   VariantProps<typeof sheetVariants> {}
 
 const closeUIclx = 'rounded-sm opacity-70 ring-offset-background ' + 
-  'transition-opacity hover:opacity-100 disabled:pointer-events-none data-[state=open]:bg-secondary'
+  'transition-opacity hover:opacity-100 disabled:pointer-events-none data-[state=open]:bg-primary'
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps & 
   { 
     closeButtonClass? : string
-    closeElement: ReactNode
+    closeElement?: ReactNode
     centerElement?: ReactNode
     duplicateCloseOnBottom?: boolean
   }
@@ -88,10 +88,12 @@ const SheetContent = React.forwardRef<
         >
           {children}
 
-          <SheetPrimitive.Close className={cn(closeUIclx, 'absolute z-10 top-3', xOfCloseUIClass, closeButtonClass)}>
-            {closeElement}
-          </SheetPrimitive.Close>
-          {duplicateCloseOnBottom && (
+          {closeElement && (
+            <SheetPrimitive.Close className={cn(closeUIclx, 'absolute z-10 top-3', xOfCloseUIClass, closeButtonClass)}>
+              {closeElement}
+            </SheetPrimitive.Close>
+          )}
+          {closeElement && duplicateCloseOnBottom && (
             <SheetPrimitive.Close className={cn(closeUIclx, 'absolute z-10 bottom-3', xOfCloseUIClass, closeButtonClass)}>
             {closeElement}
             </SheetPrimitive.Close>

package/tailwind/colors.tailwind.js

@@ -33,6 +33,10 @@ export default ({ colors }) => ({
     lux: "var(--hz-ui-secondary)", // in case there are two configs
     hover: "var(--hz-ui-secondary-hover)",
     fg: "var(--hz-ui-secondary-fg)",
+    '0': 'var(--hz-ui-secondary-0)', 
+    '1': 'var(--hz-ui-secondary-1)', 
+    '2': 'var(--hz-ui-secondary-2)', 
+    '3': 'var(--hz-ui-secondary-3)', 
   },
   destructive: {
     DEFAULT: "var(--hz-ui-destructive)",