ui: Moved Main into client code

tw: added '-screen-xl' to width

packages/auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/auth",
-  "version": "2.4.9",
+  "version": "2.4.10",
   "description": "Library with Firebase authentication.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -29,7 +29,7 @@
     "firebase-admin": "^12.1.0"
   },
   "peerDependencies": {
-    "@hanzo/ui": "^3.8.2",
+    "@hanzo/ui": "^3.8.7",
     "@hookform/resolvers": "^3.3.4",
     "firebase": "^10.8.0",
     "lucide-react": "^0.344.0",

packages/commerce/components/cart/cart-panel/index.tsx

@@ -81,7 +81,7 @@ const CartPanel: React.FC<PropsWithChildren & {
     cmmc.setCurrentItem(item.sku) 
   }
 
-  const Main: React.FC = observer(() => (<>
+  const MainStuff: React.FC = observer(() => (<>
     {cmmc.cartEmpty ? (
       <p className={cn('text-center my-3', noItemsClx)}>No items</p>
     ) : (<>
@@ -135,11 +135,11 @@ const CartPanel: React.FC<PropsWithChildren & {
       {children}
       {scrolling() ? (
         <ScrollArea className={cn('mt-2 w-full shrink py-0', listClx)}>
-          <Main />
+          <MainStuff />
         </ScrollArea>
       ) : (
         <div className={cn('mt-2 w-full', listClx)}>
-          <Main />
+          <MainStuff />
         </div>
       )}
       {handleCheckout && !cmmc.cartEmpty && (

packages/commerce/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "7.0.7",
+  "version": "7.0.8",
   "description": "e-commerce framework.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -35,8 +35,8 @@
     "square": "^35.1.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "^2.4.9",
-    "@hanzo/ui": "^3.8.2",
+    "@hanzo/auth": "^2.4.10",
+    "@hanzo/ui": "^3.8.7",
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-radio-group": "^1.1.3",
     "firebase": "^10.8.0",

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "3.8.5",
+  "version": "3.8.10",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -84,7 +84,7 @@
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-interaction-media": "^0.1.0",
-    "@hanzo/react-drawer": "0.1.0"
+    "@hanzo/react-drawer": "0.1.2"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^3.3.2",

packages/ui/primitives/index.ts

@@ -183,7 +183,6 @@ export { default as Input } from './input'
 export { default as Label } from './label'
 export { default as LinkElement } from './link-element'
 export { default as ListBox } from './list-box'
-export { default as Main } from './main'
 export { default as MDXLink } from './mdx-link'
 export { default as MediaStack } from './media-stack' 
 export { default as NavItems} from './nav-items'

packages/ui/tailwind/screens.tailwind.js

@@ -4,5 +4,5 @@ export default {
   md: '768px', // sm tablets / narrow -->
   lg: '1024px',
   xl: '1280px',
-  '2xl': '1500px', // to match other sites
+  '2xl': '1500px', 
 }

packages/ui/tailwind/tailwind.config.hanzo-preset.js

@@ -842,6 +842,8 @@ export default {
       opacity: 'opacity',
       shadow: 'box-shadow',
       transform: 'transform',
+      height: 'height',
+      spacing: 'margin, padding',
     },
     transitionTimingFunction: {
       DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
@@ -860,7 +862,7 @@ export default {
       '3/4': '75%',
       full: '100%',
     },
-    width: {
+    width: ({ theme, breakpoints }) => ({
       auto: 'auto',
       ...spacing,
       '1/2': '50%',
@@ -894,7 +896,8 @@ export default {
       min: 'min-content',
       max: 'max-content',
       fit: 'fit-content',
-    },
+      ...breakpoints(theme('screens')),
+    }),
     willChange: {
       auto: 'auto',
       scroll: 'scroll-position',