@hanzo/ui 3.3.0 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/primitives/breakpoint-indicator.tsx

@@ -5,7 +5,7 @@ const BreakpointIndicator: React.FC = () => {
   if (process.env.NODE_ENV === "production") return null
 
   return (
-    <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-primary">
+    <div className="fixed bottom-1 left-1 z-floating flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-primary">
       <div className="block sm:hidden">xs</div>
       <div className="hidden sm:block md:hidden">sm</div>
       <div className="hidden md:block lg:hidden">md</div>

package/primitives/calendar.tsx

@@ -37,7 +37,7 @@ function Calendar({
           "text-muted-1 rounded-md w-8 font-normal text-[0.8rem]",
         row: "flex w-full mt-2",
         cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-level-1 [&:has([aria-selected].day-outside)]:bg-level-1/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-above-content [&:has([aria-selected])]:bg-level-1 [&:has([aria-selected].day-outside)]:bg-level-1/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
           props.mode === "range"
             ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
             : "[&:has([aria-selected])]:rounded-md"

package/primitives/carousel.tsx

@@ -42,6 +42,9 @@ function useCarousel(): CarouselContextProps {
   return context
 }
 
+// https://github.com/emilkowalski/vaul/pull/250
+// See data-vaul-no-drag throughout
+
 const Carousel = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & CarouselProps

package/primitives/dialog.tsx

@@ -17,7 +17,7 @@ const DialogPortal = React.forwardRef<
     DialogPortalProps
 >(({ className, children, ...props }, ref) => (
     <DialogPrimitive.Portal {...props}>
-        <div className={cn("fixed inset-0 z-50 flex items-end justify-center sm:items-center", className)}>
+        <div className={cn("fixed inset-0 z-modal flex items-end justify-center sm:items-center", className)}>
             {children}
         </div>
     </DialogPrimitive.Portal>
@@ -32,7 +32,7 @@ const DialogOverlay = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Overlay>,
     DialogOverlayProps
 >(({ className, ...props }, ref) => (
-    <div className={cn("fixed inset-0 z-50 flex items-end justify-center sm:items-center", className)}>
+    <div className={cn("bg-overlay  backdrop-blur-sm fixed inset-0 z-below-modal flex items-end justify-center sm:items-center", className)}>
       <DialogPrimitive.Overlay ref={ref} {...props} />
     </div>
 ))

package/primitives/drawer.tsx

@@ -26,7 +26,7 @@ const DrawerOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Overlay
     ref={ref}
-    className={cn('fixed inset-0 bg-background opacity-50', className)}
+    className={cn('fixed inset-0 bg-overlay backdrop-blur-sm', className)}
     {...props}
   />
 ))
@@ -40,10 +40,10 @@ const DrawerContent = React.forwardRef<
 >(({ className, children, overlayClx='', ...props }, ref) => (
   <DrawerPortal>
     {/* If no or same z index, overlay should precede content */}
-    <DrawerOverlay className={overlayClx}/>
+    <DrawerOverlay className={cn('z-below-modal', overlayClx)}/>
     <DrawerPrimitive.Content
       ref={ref}
-      className={cn('fixed left-0 right-0 bottom-0 ',
+      className={cn('fixed left-0 right-0 bottom-0 z-modal',
         'mt-24 flex flex-col h-[80%] rounded-t-[10px] pt-6 border bg-background',
         className
       )}

package/primitives/input-otp.tsx

@@ -36,7 +36,7 @@ const InputOTPSlot = React.forwardRef<
       className={cn(
         'relative flex h-10 w-10 items-center justify-center border-y border-r border-muted-2 text-sm ',
         'transition-all first:rounded-l-md first:border-l last:rounded-r-md',
-        isActive && 'z-10 ring-2 ring-muted', // TODO: couldn't find: 'ring-offset-background' 
+        isActive && 'z-above-content ring-2 ring-muted', // TODO: couldn't find: 'ring-offset-background' 
         className
       )}
       {...props}

package/primitives/popover.tsx

@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 w-72 rounded-md border bg-level-1 p-4 text-foreground shadow-md outline-none ' + 
+        'z-modal w-72 rounded-md border bg-level-1 p-4 text-foreground shadow-md outline-none ' + 
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ' + 
         'data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ' + 
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 ' + 

package/primitives/select.tsx

@@ -76,7 +76,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border ' + 
+        'relative z-popup max-h-96 min-w-[8rem] overflow-hidden rounded-md border ' + 
         'bg-level-1 text-foreground shadow-md data-[state=open]:animate-in ' + 
         'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ' + 
         'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ' + 

package/primitives/sheet.tsx

@@ -22,7 +22,8 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-below-modal bg-overlay backdrop-blur-sm',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
@@ -32,7 +33,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-3 sm:p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-300',
+  'fixed z-modal gap-4 bg-background p-3 sm:p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-300',
   {
     variants: {
       side: {
@@ -89,17 +90,17 @@ const SheetContent = React.forwardRef<
           {children}
 
           {closeElement && (
-            <SheetPrimitive.Close className={cn(closeUIclx, 'absolute z-10 top-3', xOfCloseUIClass, closeButtonClass)}>
+            <SheetPrimitive.Close className={cn(closeUIclx, 'absolute z-above-content top-3', xOfCloseUIClass, closeButtonClass)}>
               {closeElement}
             </SheetPrimitive.Close>
           )}
           {closeElement && duplicateCloseOnBottom && (
-            <SheetPrimitive.Close className={cn(closeUIclx, 'absolute z-10 bottom-3', xOfCloseUIClass, closeButtonClass)}>
+            <SheetPrimitive.Close className={cn(closeUIclx, 'absolute z-above-content bottom-3', xOfCloseUIClass, closeButtonClass)}>
             {closeElement}
             </SheetPrimitive.Close>
           )}
           {centerElement && (
-            <div className={'absolute z-0 top-3 left-0 right-0 flex flex-row justify-center align-start'} >
+            <div className={'absolute z-content top-3 left-0 right-0 flex flex-row justify-center align-start'} >
               {centerElement}
             </div>
           )}

package/primitives/youtube-embed.tsx

@@ -60,7 +60,7 @@ const YouTubeEmbed: React.FC<{
           />
           <div 
             className={  //https://stackoverflow.com/a/23384995/11645689
-              'absolute z-50 left-[50%] top-[50%] -translate-y-2/4 -translate-x-2/4 ' + 
+              'absolute z-above-content-2 left-[50%] top-[50%] -translate-y-2/4 -translate-x-2/4 ' + 
               'grid place-items-center ' + 
               'text-xl text-white opacity-90'
             }
@@ -73,7 +73,7 @@ const YouTubeEmbed: React.FC<{
               {...{'aria-hidden': true}} 
             />
           </div>
-          {caption && <p className='hidden md:block whitespace-nowrap typography absolute z-50 left-[50%] top-[20px] -translate-x-2/4 '>{caption}</p>}
+          {caption && <p className='hidden md:block whitespace-nowrap typography absolute z-above-content left-[50%] top-[20px] -translate-x-2/4 '>{caption}</p>}
         </button>
       )}
     </div>

package/style/hanzo-default-colors.css

@@ -17,8 +17,10 @@
     --hz-ui-bg-2: hsl(0 0% 75%);
     --hz-ui-bg-3: hsl(0 0% 55%);
 
+    --hz-ui-bg-overlay: hsla(0 0% 100% 0.60);
+
     --hz-ui-bg-inverted: var(--hz-ui-fg-0);
-    --hz-ui-bg-inverted-hover:  hsla(0, 0%, 0%, 0.85);
+    --hz-ui-bg-inverted-hover:  hsla(0 0% 0% 0.85);
 
     --hz-ui-fg-inverted: var(--hz-ui-bg-0);
 
@@ -52,7 +54,7 @@
   .hanzo-ui-dark-theme {
 
     --hz-ui-fg-0: hsl(0 0% 100%);
-    --hz-ui-fg-body: hsl(0, 0%, 97%);
+    --hz-ui-fg-body: hsl(0, 100%, 0%);
     --hz-ui-fg-1: hsl(0 0% 85%);
     --hz-ui-fg-2: hsl(0 0% 70%);
     --hz-ui-fg-3: hsl(0 0% 55%);
@@ -67,6 +69,8 @@
     --hz-ui-bg-1: hsl(0 0% 12%);
     --hz-ui-bg-0: hsl(0 0% 0%);
 
+    --hz-ui-bg-overlay: hsla(0 0% 0% 0.60);
+
     --hz-ui-fg-inverted: var(--hz-ui-bg-0);
 
     --hz-ui-secondary-0: hsl(266, 79%, 40%);

package/tailwind/colors.tailwind.js

@@ -5,6 +5,10 @@ export default ({ colors }) => ({
   input: "var(--hz-ui-input)",
   ring: "var(--hz-ui-ring)",
   background: 'var(--hz-ui-bg-0)',
+    // Should be partially transparent,
+    // so opacity animations in 'vaul' module and other 3rd party stuff work
+  overlay: 'var(--hz-ui-bg-overlay)', 
+  
     // levels forward in z-index (a la Material Design)
   level: {
     DEFAULT: "var(--hz-ui-bg-0)",

package/tailwind/tailwind.config.hanzo-preset.js

@@ -8,6 +8,7 @@ import screens from './screens.tailwind'
 import spacing from './spacing.tailwind'
 import fontSize from './fontSize.tailwind'
 import fontFamily from './fontFamily.tailwind'
+import zIndex from './z-index.tailwind'
 import typographyPlugin from './typo-plugin'
 
 export default {
@@ -905,14 +906,6 @@ export default {
       contents: 'contents',
       transform: 'transform',
     },
-    zIndex: {
-      auto: 'auto',
-      0: '0',
-      10: '10',
-      20: '20',
-      30: '30',
-      40: '40',
-      50: '50',
-    },
+    zIndex,
   },
 }

package/tailwind/z-index.tailwind.js

@@ -0,0 +1,71 @@
+const zIndex = {
+
+  auto: 'auto',
+  unset: 'unset',
+
+  ...{
+    'below-content-3': '-3',
+    'below-content-2': '-2',
+    'below-content-1': '-1',
+    'below-content': '-1',
+    'content': '0',
+    'above-content': '1',
+    'above-content-1': '1',
+    'above-content-2': '2',
+    'above-content-3': '3',
+  },
+    // popups that may scroll w content, appear below header, etc
+    // for larger, modal popups, please use 'modal'
+  ...{
+    'below-popup-3': '7',
+    'below-popup-2': '8',
+    'below-popup-1': '9',
+    'below-popup': '9',
+    'popup': '10',
+    'above-popup': '11',
+    'above-popup-1': '11',
+    'above-popup-2': '12',
+    'above-popup-3': '13',
+  },
+  ...{
+    'below-header-3': '17',
+    'below-header-2': '18',
+    'below-header-1': '19',
+    'below-header': '19',
+    'header': '20',
+    'above-header': '21',
+    'above-header-1': '21',
+    'above-header-2': '22',
+    'above-header-3': '23',
+  },
+    // drawer, dialog, full screen menu
+  ...{
+    'below-modal-3': '27',
+    'below-modal-2': '28',
+    'below-modal-1': '29',
+    'below-modal': '29',
+    'modal': '30',
+    'above-modal': '31',
+    'above-modal-1': '31',
+    'above-modal-2': '32',
+    'above-modal-3': '33',
+  },
+    // "highest": help button, other UI that floats above everything.
+  ...{
+    'below-floating-3': '37',
+    'below-floating-2': '38',
+    'below-floating-1': '39',
+    'below-floating': '39',
+    'floating': '40',
+    'above-floating': '41',
+    'above-floating-1': '41',
+    'above-floating-2': '42',
+    'above-floating-3': '43',
+  },
+}
+
+for (let i = 0; i <= 50; i++) {
+  zIndex[`${i}`] = `${i}` 
+}
+
+export default zIndex