@hanzo/ui 3.0.1 → 3.0.3

package/blocks/components/{card-block.tsx → card-block/index.tsx}

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import type { Dimensions, LinkDef, TShirtDimensions  } from  '../../types'
+import type { LinkDef, TShirtDimensions  } from  '../../../types'
 
 import {
   ApplyTypography,  
@@ -10,63 +10,21 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-  LinkElement,
   type TypographySize
-} from '../../primitives'
+} from '../../../primitives'
 
-import { Icons } from '../../primitives'
+import type { CardBlock } from '../../def'
 
-import {
-  getSpecifierData, 
-  getPrimaryStartingWith, 
-  getDim, 
-} from '../../util/specifier'
-
-import type { Block, CardBlock } from '../def'
-
-
-import ImageBlockComponent from './image-block'
-import VideoBlockComponent from './video-block'
-import CTABlockComponent from './cta-block'
-import type BlockComponentProps from './block-component-props'
-import { cn } from '../../util'
-
-const ArrowLinkElement: React.FC<{
-  def: LinkDef,
-}> = ({
-  def
-}) => (
-  <LinkElement
-    def={def}
-    className='justify-between'
-    variant='link'
-    icon={<Icons.linkOut className='w-[18px] h-[18px]' />}
-    iconAfter
-  />
-) 
-
-const getTypographySize = (s: string): TypographySize => (
-  getSpecifierData<TypographySize>(
-    s,
-    (s: string) => (getPrimaryStartingWith(s, 'typography')),
-    (s: string): TypographySize | undefined => {
-      const subTokenArray = s.split('-')
-      return subTokenArray[subTokenArray.length - 1] as TypographySize
-    },
-    'responsive'
-  ) as TypographySize
-)
+import ImageBlockComponent from '../image-block'
+import VideoBlockComponent from '../video-block'
+import CTABlockComponent from '../cta-block'
+import type BlockComponentProps from '../block-component-props'
+import { cn } from '../../../util'
 
-const getSmallIconDim = (s: string): Dimensions | undefined => (
-  getSpecifierData<Dimensions>(
-    s,
-    (s: string) => (getPrimaryStartingWith(s, 'small-icon')),
-    getDim,
-  ) 
-)
+import { getTypographySize } from './util'
+import LinkOutButton from './link-out-button'
 
-const CardBlockComponent: React.FC<
-  BlockComponentProps & {
+const CardBlockComponent: React.FC<BlockComponentProps & {
   contentClassName?: string
 }> = ({
   block,
@@ -181,7 +139,7 @@ const CardBlockComponent: React.FC<
     }>
       <CTABlockComponent 
         block={card.cta} 
-        renderLink={(def: LinkDef, key: any) => (<ArrowLinkElement def={def} key={key} />)}
+        renderLink={(def: LinkDef, key: any) => (<LinkOutButton def={def} key={key} />)}
       />
     </CardFooter>
   ) : ( // default 

package/blocks/components/card-block/link-out-button.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import type { LinkDef } from '../../../types'
+import { LinkElement, Icons } from '../../../primitives'
+
+const ArrowLinkElement: React.FC<{
+  def: LinkDef,
+}> = ({
+  def
+}) => (
+  <LinkElement
+    def={def}
+    className='justify-between'
+    variant='link'
+    icon={<Icons.linkOut className='w-[18px] h-[18px]' />}
+    iconAfter
+  />
+) 
+
+export default ArrowLinkElement

package/blocks/components/card-block/util.ts

@@ -0,0 +1,28 @@
+import type { Dimensions } from  '../../../types'
+import type {TypographySize } from '../../../primitives'
+import {
+  getSpecifierData, 
+  getPrimaryStartingWith, 
+  getDim, 
+} from '../../../util/specifier'
+
+export const getTypographySize = (s: string): TypographySize => (
+  getSpecifierData<TypographySize>(
+    s,
+    (s: string) => (getPrimaryStartingWith(s, 'typography')),
+    (s: string): TypographySize | undefined => {
+      const subTokenArray = s.split('-')
+      return subTokenArray[subTokenArray.length - 1] as TypographySize
+    },
+    'responsive'
+  ) as TypographySize
+)
+
+export const getSmallIconDim = (s: string): Dimensions | undefined => (
+  getSpecifierData<Dimensions>(
+    s,
+    (s: string) => (getPrimaryStartingWith(s, 'small-icon')),
+    getDim,
+  ) 
+)
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "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/{tailwind-indicator.tsx → breakpoint-indicator.tsx}

@@ -1,6 +1,6 @@
 import React from 'react'
 
-const TailwindIndicator: React.FC = () => {
+const BreakpointIndicator: React.FC = () => {
   
   if (process.env.NODE_ENV === "production") return null
 
@@ -16,4 +16,4 @@ const TailwindIndicator: React.FC = () => {
   )
 }
 
-export default TailwindIndicator
+export default BreakpointIndicator

package/primitives/button.tsx

@@ -54,6 +54,7 @@ const buttonVariants = cva(
 
 type ButtonVariants = keyof typeof variant
 type ButtonSizes = keyof typeof size
+type ButtonRounded = keyof typeof rounded
 
 interface ButtonProps extends
   React.ButtonHTMLAttributes<HTMLButtonElement>, 
@@ -82,5 +83,6 @@ export {
   type ButtonProps,
   type ButtonVariants,
   type ButtonSizes, 
+  type ButtonRounded,
   buttonVariants,
 }

package/primitives/card.tsx

@@ -27,7 +27,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col p-4 lg:p-6 xl:p-8 border-b", className)}
+    className={cn("flex flex-col p-4 lg:p-5 xl:px-6 xl:py-5 border-b", className)}
     {...props}
   />
 ))

package/primitives/index.ts

@@ -65,7 +65,7 @@ export {
   TableCaption,
 } from './table'
 
-export { default as TailwindIndicator } from './tailwind-indicator'
+export { default as BreakpointIndicator } from './breakpoint-indicator'
 
 export {
   type ToastProps,
@@ -94,9 +94,11 @@ export {
 
 export { 
   Popover, 
-  PopoverTrigger, 
+  PopoverAnchor, 
+  PopoverArrow, 
+  PopoverClose, 
   PopoverContent, 
-  PopoverAnchor 
+  PopoverTrigger, 
 } from './popover'
 
 export {

package/primitives/popover.tsx

@@ -6,7 +6,9 @@ import { cn } from '../util'
 
 const Popover = PopoverPrimitive.Root
 const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverClose = PopoverPrimitive.Close
 const PopoverAnchor = PopoverPrimitive.Anchor
+const PopoverArrow = PopoverPrimitive.Arrow
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -32,4 +34,4 @@ const PopoverContent = React.forwardRef<
 ))
 PopoverContent.displayName = PopoverPrimitive.Content.displayName
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose, PopoverArrow }

package/primitives/sheet.tsx

@@ -36,8 +36,8 @@ const sheetVariants = cva(
   {
     variants: {
       side: {
-        //top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
-        //bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
         left: 'inset-y-0 left-0 h-full w-5/6 sm:w-2/3 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
         right:
           'inset-y-0 right-0 h-full w-5/6 sm:w-2/3 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',

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

@@ -11,7 +11,6 @@ import fontFamily from './fontFamily.tailwind'
 import typographyPlugin from './typo-plugin'
 
 export default {
-  presets: [],
   darkMode: ["class"],
   content: [],
   safelist,
@@ -35,6 +34,7 @@ export default {
       bounce: 'bounce 1s infinite',
       "accordion-down": "accordion-down 0.2s ease-out",
       "accordion-up": "accordion-up 0.2s ease-out",
+      "mobile-menu-open": "opacity-in 300ms ease-in",
     },
     aria: {
       checked: 'checked="true"',
@@ -536,6 +536,10 @@ export default {
         from: { height: "var(--radix-accordion-content-height)" },
         to: { height: 0 },
       },
+      "opacity-in": {
+        from: { opacity: '0' },
+        to: { opacity: '1' }
+      },
     },
     letterSpacing: {
       tighter: '-0.05em',

package/util/index.ts

@@ -78,4 +78,3 @@ export const ldMerge = (
 export const capitalize = (str: string): string => (
   str.charAt(0).toUpperCase() + str.slice(1)
 )
-