@hanzogui/kitchen-sink 3.0.5

package/src/usecases/MenuSubLeftCase.tsx

@@ -0,0 +1,178 @@
+import { ChevronLeft } from '@hanzogui/lucide-icons-2'
+import { Menu } from '@hanzogui/menu'
+import React from 'react'
+import { Button, H1, Paragraph, Text, XStack, YStack } from '@hanzo/gui'
+
+/**
+ * Menu Submenu Left Side Test Case
+ *
+ * Tests the safePolygon behavior when submenu is positioned to the LEFT of the trigger.
+ * This happens when:
+ * 1. The menu is near the right edge of the screen
+ * 2. allowFlip is enabled and there's not enough space on the right
+ * 3. placement is explicitly set to "left-start"
+ *
+ * The polygon should work correctly regardless of which side the submenu appears on.
+ */
+export function MenuSubLeftCase() {
+  const [subMenuOpen, setSubMenuOpen] = React.useState(false)
+  const [lastAction, setLastAction] = React.useState<string>('')
+
+  return (
+    <YStack gap="$4" padding="$4" maxWidth={800} margin="auto">
+      <YStack gap="$2">
+        <H1>Menu Submenu Left-Side SafePolygon Test</H1>
+        <Paragraph>
+          This tests that the safePolygon logic works correctly when the submenu opens to
+          the LEFT of the trigger. Move your mouse diagonally from the trigger to the
+          submenu - it should not close.
+        </Paragraph>
+        <Text id="last-action" color="$color10">
+          Last action: {lastAction || 'None'}
+        </Text>
+        <Text id="submenu-state" color={subMenuOpen ? '$green10' : '$red10'}>
+          Submenu: {subMenuOpen ? 'Open' : 'Closed'}
+        </Text>
+      </YStack>
+
+      {/* position the menu on the right side to force submenu to open LEFT */}
+      <XStack justifyContent="flex-end" paddingRight="$10">
+        <Menu allowFlip={false} placement="bottom-end" offset={8}>
+          <Menu.Trigger asChild>
+            <Button id="menu-trigger" size="$4">
+              Open Menu (Left Submenu)
+            </Button>
+          </Menu.Trigger>
+
+          <Menu.Portal zIndex={100}>
+            <Menu.Content
+              id="menu-content"
+              p="$2"
+              minW={220}
+              borderWidth={1}
+              borderColor="$borderColor"
+              bg="$background"
+              elevation="$3"
+            >
+              <Menu.Item
+                key="menu-item-1"
+                id="menu-item-1"
+                onSelect={() => setLastAction('Item 1 selected')}
+                style={{ paddingHorizontal: 12, paddingVertical: 8, borderRadius: 4 }}
+                focusStyle={{ bg: '$backgroundHover' }}
+              >
+                <Menu.ItemTitle>Item 1 (above trigger)</Menu.ItemTitle>
+              </Menu.Item>
+
+              <Menu.Item
+                key="menu-item-2"
+                id="menu-item-2"
+                onSelect={() => setLastAction('Item 2 selected')}
+                style={{ paddingHorizontal: 12, paddingVertical: 8, borderRadius: 4 }}
+                focusStyle={{ bg: '$backgroundHover' }}
+              >
+                <Menu.ItemTitle>Item 2 (above trigger)</Menu.ItemTitle>
+              </Menu.Item>
+
+              {/* submenu explicitly positioned to the left */}
+              <Menu.Sub
+                open={subMenuOpen}
+                placement="left-start"
+                onOpenChange={(open) => {
+                  setSubMenuOpen(open)
+                  setLastAction(`Submenu ${open ? 'opened' : 'closed'}`)
+                }}
+              >
+                <Menu.SubTrigger
+                  key="submenu-trigger"
+                  id="submenu-trigger"
+                  justify="space-between"
+                  textValue="Actions"
+                  style={{ paddingHorizontal: 12, paddingVertical: 8, borderRadius: 4 }}
+                  focusStyle={{ bg: '$backgroundHover' }}
+                >
+                  <ChevronLeft size={14} color="$color10" />
+                  <Menu.ItemTitle>Actions (left submenu)</Menu.ItemTitle>
+                </Menu.SubTrigger>
+
+                <Menu.Portal zIndex={200}>
+                  <Menu.SubContent
+                    id="submenu-content"
+                    bg="$background"
+                    p="$2"
+                    minW={180}
+                    borderWidth={1}
+                    borderColor="$borderColor"
+                    elevation="$3"
+                  >
+                    <Menu.Item
+                      key="submenu-item-1"
+                      id="submenu-item-1"
+                      onSelect={() => setLastAction('Sub Item 1 selected')}
+                      style={{
+                        paddingHorizontal: 12,
+                        paddingVertical: 8,
+                        borderRadius: 4,
+                      }}
+                      focusStyle={{ bg: '$backgroundHover' }}
+                    >
+                      <Menu.ItemTitle>Sub Item 1</Menu.ItemTitle>
+                    </Menu.Item>
+
+                    <Menu.Item
+                      key="submenu-item-2"
+                      id="submenu-item-2"
+                      onSelect={() => setLastAction('Sub Item 2 selected')}
+                      style={{
+                        paddingHorizontal: 12,
+                        paddingVertical: 8,
+                        borderRadius: 4,
+                      }}
+                      focusStyle={{ bg: '$backgroundHover' }}
+                    >
+                      <Menu.ItemTitle>Sub Item 2</Menu.ItemTitle>
+                    </Menu.Item>
+
+                    <Menu.Item
+                      key="submenu-item-3"
+                      id="submenu-item-3"
+                      onSelect={() => setLastAction('Sub Item 3 selected')}
+                      style={{
+                        paddingHorizontal: 12,
+                        paddingVertical: 8,
+                        borderRadius: 4,
+                      }}
+                      focusStyle={{ bg: '$backgroundHover' }}
+                    >
+                      <Menu.ItemTitle>Sub Item 3</Menu.ItemTitle>
+                    </Menu.Item>
+                  </Menu.SubContent>
+                </Menu.Portal>
+              </Menu.Sub>
+
+              <Menu.Item
+                key="menu-item-3"
+                id="menu-item-3"
+                onSelect={() => setLastAction('Item 3 selected')}
+                style={{ paddingHorizontal: 12, paddingVertical: 8, borderRadius: 4 }}
+                focusStyle={{ bg: '$backgroundHover' }}
+              >
+                <Menu.ItemTitle>Item 3 (below trigger)</Menu.ItemTitle>
+              </Menu.Item>
+
+              <Menu.Item
+                key="menu-item-4"
+                id="menu-item-4"
+                onSelect={() => setLastAction('Item 4 selected')}
+                style={{ paddingHorizontal: 12, paddingVertical: 8, borderRadius: 4 }}
+                focusStyle={{ bg: '$backgroundHover' }}
+              >
+                <Menu.ItemTitle>Item 4 (below trigger)</Menu.ItemTitle>
+              </Menu.Item>
+            </Menu.Content>
+          </Menu.Portal>
+        </Menu>
+      </XStack>
+    </YStack>
+  )
+}

package/src/usecases/MenuSubNestedPositionCase.tsx

@@ -0,0 +1,171 @@
+import { ChevronRight } from '@hanzogui/lucide-icons-2'
+import { Menu } from '@hanzogui/menu'
+import React from 'react'
+import { Button, Text, YStack } from '@hanzo/gui'
+
+/**
+ * Tests that deeply nested submenus (3 levels) cascade in the same direction
+ * rather than flipping back and overlapping the root menu.
+ *
+ * The trigger is positioned toward the right so that the nested submenu
+ * is forced to make a flip decision when viewport is narrow enough.
+ */
+export function MenuSubNestedPositionCase() {
+  const [subOpen, setSubOpen] = React.useState(false)
+  const [nestedOpen, setNestedOpen] = React.useState(false)
+
+  return (
+    <YStack padding="$4" minHeight={600}>
+      <YStack alignItems="flex-end" paddingRight={100}>
+        <Menu placement="bottom-start" offset={4}>
+          <Menu.Trigger asChild>
+            <Button id="menu-trigger" size="$3">
+              Open Menu
+            </Button>
+          </Menu.Trigger>
+
+          <Menu.Portal zIndex={100}>
+            <Menu.Content
+              id="menu-content"
+              p="$2"
+              minWidth={180}
+              borderWidth={1}
+              borderColor="$borderColor"
+              bg="$background"
+              elevation="$3"
+            >
+              <Menu.Item
+                key="item-1"
+                id="item-1"
+                style={{ paddingHorizontal: 12, paddingVertical: 8, borderRadius: 4 }}
+                focusStyle={{ bg: '$backgroundHover' }}
+              >
+                <Menu.ItemTitle>Item 1</Menu.ItemTitle>
+              </Menu.Item>
+
+              <Menu.Sub open={subOpen} onOpenChange={setSubOpen}>
+                <Menu.SubTrigger
+                  key="sub-trigger"
+                  id="sub-trigger"
+                  justify="space-between"
+                  textValue="More"
+                  style={{ paddingHorizontal: 12, paddingVertical: 8, borderRadius: 4 }}
+                  focusStyle={{ bg: '$backgroundHover' }}
+                >
+                  <Menu.ItemTitle>More</Menu.ItemTitle>
+                  <ChevronRight size={14} color="$color10" />
+                </Menu.SubTrigger>
+
+                <Menu.Portal zIndex={200}>
+                  <Menu.SubContent
+                    id="sub-content"
+                    bg="$background"
+                    p="$2"
+                    minWidth={180}
+                    borderWidth={1}
+                    borderColor="$borderColor"
+                    elevation="$3"
+                  >
+                    <Menu.Item
+                      key="sub-item-1"
+                      id="sub-item-1"
+                      style={{
+                        paddingHorizontal: 12,
+                        paddingVertical: 8,
+                        borderRadius: 4,
+                      }}
+                      focusStyle={{ bg: '$backgroundHover' }}
+                    >
+                      <Menu.ItemTitle>Sub Item 1</Menu.ItemTitle>
+                    </Menu.Item>
+
+                    <Menu.Sub open={nestedOpen} onOpenChange={setNestedOpen}>
+                      <Menu.SubTrigger
+                        key="nested-trigger"
+                        id="nested-trigger"
+                        justify="space-between"
+                        textValue="Even More"
+                        style={{
+                          paddingHorizontal: 12,
+                          paddingVertical: 8,
+                          borderRadius: 4,
+                        }}
+                        focusStyle={{ bg: '$backgroundHover' }}
+                      >
+                        <Menu.ItemTitle>Even More</Menu.ItemTitle>
+                        <ChevronRight size={14} color="$color10" />
+                      </Menu.SubTrigger>
+
+                      <Menu.Portal zIndex={300}>
+                        <Menu.SubContent
+                          id="nested-content"
+                          bg="$background"
+                          p="$2"
+                          minWidth={180}
+                          borderWidth={1}
+                          borderColor="$borderColor"
+                          elevation="$3"
+                        >
+                          <Menu.Item
+                            key="nested-item-1"
+                            id="nested-item-1"
+                            style={{
+                              paddingHorizontal: 12,
+                              paddingVertical: 8,
+                              borderRadius: 4,
+                            }}
+                            focusStyle={{ bg: '$backgroundHover' }}
+                          >
+                            <Menu.ItemTitle>Nested Item 1</Menu.ItemTitle>
+                          </Menu.Item>
+                          <Menu.Item
+                            key="nested-item-2"
+                            id="nested-item-2"
+                            style={{
+                              paddingHorizontal: 12,
+                              paddingVertical: 8,
+                              borderRadius: 4,
+                            }}
+                            focusStyle={{ bg: '$backgroundHover' }}
+                          >
+                            <Menu.ItemTitle>Nested Item 2</Menu.ItemTitle>
+                          </Menu.Item>
+                        </Menu.SubContent>
+                      </Menu.Portal>
+                    </Menu.Sub>
+
+                    <Menu.Item
+                      key="sub-item-2"
+                      id="sub-item-2"
+                      style={{
+                        paddingHorizontal: 12,
+                        paddingVertical: 8,
+                        borderRadius: 4,
+                      }}
+                      focusStyle={{ bg: '$backgroundHover' }}
+                    >
+                      <Menu.ItemTitle>Sub Item 2</Menu.ItemTitle>
+                    </Menu.Item>
+                  </Menu.SubContent>
+                </Menu.Portal>
+              </Menu.Sub>
+
+              <Menu.Item
+                key="item-2"
+                id="item-2"
+                style={{ paddingHorizontal: 12, paddingVertical: 8, borderRadius: 4 }}
+                focusStyle={{ bg: '$backgroundHover' }}
+              >
+                <Menu.ItemTitle>Item 2</Menu.ItemTitle>
+              </Menu.Item>
+            </Menu.Content>
+          </Menu.Portal>
+        </Menu>
+      </YStack>
+
+      <Text id="sub-state" marginTop="$4">
+        Sub: {subOpen ? 'open' : 'closed'} | Nested: {nestedOpen ? 'open' : 'closed'}
+      </Text>
+    </YStack>
+  )
+}

package/src/usecases/MenuSubStyledCase.tsx

@@ -0,0 +1,145 @@
+import { ChevronRight } from '@hanzogui/lucide-icons-2'
+import { Menu } from '@hanzogui/menu'
+import React from 'react'
+import { Button, H1, Paragraph, styled, Text, YStack } from '@hanzo/gui'
+
+/**
+ * Menu Submenu Styled Test Case
+ *
+ * Tests that styled(Menu.SubContent, {...}) works correctly with animation styles
+ * like scale, enterStyle, and exitStyle. Previously these would break positioning
+ * because Menu.SubContent wasn't properly styleable.
+ */
+
+// styled wrapper for SubContent - this should work without breaking positioning
+const StyledSubContent = styled(Menu.SubContent, {
+  bg: '$background',
+  p: '$2',
+  minW: 180,
+  borderWidth: 1,
+  borderColor: '$borderColor',
+  elevation: '$3',
+  // these used to break positioning:
+  scale: 1,
+  opacity: 1,
+  enterStyle: { x: -8, opacity: 0, scale: 0.96 },
+  exitStyle: { x: -4, opacity: 0, scale: 0.98 },
+})
+
+export function MenuSubStyledCase() {
+  const [subMenuOpen, setSubMenuOpen] = React.useState(false)
+  const [lastAction, setLastAction] = React.useState<string>('')
+
+  return (
+    <YStack gap="$4" padding="$4" maxWidth={800} margin="auto">
+      <YStack gap="$2">
+        <H1>Menu Submenu Styled Test</H1>
+        <Paragraph>
+          Tests that styled(Menu.SubContent, ...) works correctly with animation styles.
+          The submenu should appear to the right of the trigger, not at top-left.
+        </Paragraph>
+        <Text id="last-action" color="$color10">
+          Last action: {lastAction || 'None'}
+        </Text>
+        <Text id="submenu-state" color={subMenuOpen ? '$green10' : '$red10'}>
+          Submenu: {subMenuOpen ? 'Open' : 'Closed'}
+        </Text>
+      </YStack>
+
+      <YStack alignItems="flex-start" gap="$4">
+        <Menu allowFlip placement="bottom-start" offset={8}>
+          <Menu.Trigger asChild>
+            <Button id="menu-trigger" size="$4">
+              Open Menu
+            </Button>
+          </Menu.Trigger>
+
+          <Menu.Portal zIndex={100}>
+            <Menu.Content
+              id="menu-content"
+              p="$2"
+              minW={220}
+              borderWidth={1}
+              borderColor="$borderColor"
+              bg="$background"
+              elevation="$3"
+            >
+              <Menu.Item
+                key="menu-item-1"
+                id="menu-item-1"
+                onSelect={() => setLastAction('Item 1 selected')}
+                style={{ paddingHorizontal: 12, paddingVertical: 8, borderRadius: 4 }}
+                focusStyle={{ bg: '$backgroundHover' }}
+              >
+                <Menu.ItemTitle>Item 1</Menu.ItemTitle>
+              </Menu.Item>
+
+              <Menu.Sub
+                open={subMenuOpen}
+                placement="right-start"
+                onOpenChange={(open) => {
+                  setSubMenuOpen(open)
+                  setLastAction(`Submenu ${open ? 'opened' : 'closed'}`)
+                }}
+              >
+                <Menu.SubTrigger
+                  key="submenu-trigger"
+                  id="submenu-trigger"
+                  justify="space-between"
+                  textValue="Actions"
+                  style={{ paddingHorizontal: 12, paddingVertical: 8, borderRadius: 4 }}
+                  focusStyle={{ bg: '$backgroundHover' }}
+                >
+                  <Menu.ItemTitle>Actions (styled submenu)</Menu.ItemTitle>
+                  <ChevronRight size={14} color="$color10" />
+                </Menu.SubTrigger>
+
+                <Menu.Portal zIndex={200}>
+                  <StyledSubContent id="submenu-content">
+                    <Menu.Item
+                      key="submenu-item-1"
+                      id="submenu-item-1"
+                      onSelect={() => setLastAction('Sub Item 1 selected')}
+                      style={{
+                        paddingHorizontal: 12,
+                        paddingVertical: 8,
+                        borderRadius: 4,
+                      }}
+                      focusStyle={{ bg: '$backgroundHover' }}
+                    >
+                      <Menu.ItemTitle>Sub Item 1</Menu.ItemTitle>
+                    </Menu.Item>
+
+                    <Menu.Item
+                      key="submenu-item-2"
+                      id="submenu-item-2"
+                      onSelect={() => setLastAction('Sub Item 2 selected')}
+                      style={{
+                        paddingHorizontal: 12,
+                        paddingVertical: 8,
+                        borderRadius: 4,
+                      }}
+                      focusStyle={{ bg: '$backgroundHover' }}
+                    >
+                      <Menu.ItemTitle>Sub Item 2</Menu.ItemTitle>
+                    </Menu.Item>
+                  </StyledSubContent>
+                </Menu.Portal>
+              </Menu.Sub>
+
+              <Menu.Item
+                key="menu-item-2"
+                id="menu-item-2"
+                onSelect={() => setLastAction('Item 2 selected')}
+                style={{ paddingHorizontal: 12, paddingVertical: 8, borderRadius: 4 }}
+                focusStyle={{ bg: '$backgroundHover' }}
+              >
+                <Menu.ItemTitle>Item 2</Menu.ItemTitle>
+              </Menu.Item>
+            </Menu.Content>
+          </Menu.Portal>
+        </Menu>
+      </YStack>
+    </YStack>
+  )
+}

package/src/usecases/MenuThemeCase.tsx

@@ -0,0 +1,50 @@
+import { Menu } from '@hanzogui/menu'
+import React from 'react'
+import { Button, Theme, YStack } from '@hanzo/gui'
+
+/**
+ * Menu Theme Test Case
+ *
+ * Tests that menu content inherits the theme from parent context.
+ * When a menu is inside a themed context (e.g., theme="blue"),
+ * the portal should also render with that theme.
+ */
+export function MenuThemeCase() {
+  return (
+    <Theme name="blue">
+      <YStack
+        data-testid="themed-container"
+        backgroundColor="$background"
+        padding="$4"
+        borderRadius="$4"
+        alignItems="flex-start"
+      >
+        <Menu placement="bottom-start" offset={8}>
+          <Menu.Trigger asChild>
+            <Button data-testid="menu-trigger" size="$4">
+              Open Menu
+            </Button>
+          </Menu.Trigger>
+
+          <Menu.Portal>
+            <Menu.Content
+              data-testid="menu-content"
+              p="$2"
+              minW={180}
+              borderWidth={1}
+              borderColor="$borderColor"
+              bg="$background"
+            >
+              <Menu.Item key="item-1" data-testid="menu-item-1">
+                <Menu.ItemTitle>Item 1</Menu.ItemTitle>
+              </Menu.Item>
+              <Menu.Item key="item-2" data-testid="menu-item-2">
+                <Menu.ItemTitle>Item 2</Menu.ItemTitle>
+              </Menu.Item>
+            </Menu.Content>
+          </Menu.Portal>
+        </Menu>
+      </YStack>
+    </Theme>
+  )
+}

package/src/usecases/MenuUnstyledCase.tsx

@@ -0,0 +1,52 @@
+import { Menu } from '@hanzogui/menu'
+import { Button, YStack } from '@hanzo/gui'
+
+/**
+ * Menu Unstyled Test Case
+ *
+ * Tests that Menu.Content unstyled prop removes all default styles.
+ * When unstyled is true, no background, padding, or border should be applied.
+ */
+export function MenuUnstyledCase() {
+  return (
+    <YStack padding="$4" gap="$4">
+      <Menu placement="bottom-start" offset={8}>
+        <Menu.Trigger asChild>
+          <Button data-testid="unstyled-menu-trigger" size="$4">
+            Open Unstyled Menu
+          </Button>
+        </Menu.Trigger>
+
+        <Menu.Portal>
+          <Menu.Content data-testid="unstyled-menu-content" unstyled>
+            <Menu.Item key="item-1" data-testid="unstyled-menu-item-1">
+              <Menu.ItemTitle>Item 1</Menu.ItemTitle>
+            </Menu.Item>
+            <Menu.Item key="item-2" data-testid="unstyled-menu-item-2">
+              <Menu.ItemTitle>Item 2</Menu.ItemTitle>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+
+      <Menu placement="bottom-start" offset={8}>
+        <Menu.Trigger asChild>
+          <Button data-testid="styled-menu-trigger" size="$4">
+            Open Styled Menu (default)
+          </Button>
+        </Menu.Trigger>
+
+        <Menu.Portal>
+          <Menu.Content data-testid="styled-menu-content">
+            <Menu.Item key="item-1" data-testid="styled-menu-item-1">
+              <Menu.ItemTitle>Item 1</Menu.ItemTitle>
+            </Menu.Item>
+            <Menu.Item key="item-2" data-testid="styled-menu-item-2">
+              <Menu.ItemTitle>Item 2</Menu.ItemTitle>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Portal>
+      </Menu>
+    </YStack>
+  )
+}