@hanzogui/demos 4.3.1 → 8.0.0

package/src/BuildAButtonDemo.tsx

@@ -1,6 +1,6 @@
 import { Drumstick, Hand } from '@hanzogui/lucide-icons-2'
-import type { ButtonProps, ThemeName } from '@hanzo/gui'
-import { Button, XStack, YStack } from '@hanzo/gui'
+import type { ButtonProps, ThemeName } from 'hanzogui'
+import { Button, XStack, YStack } from 'hanzogui'
 
 const outlined = {
   bg: 'transparent',

package/src/ButtonDemo.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@hanzogui/button'
 import { Activity, Airplay } from '@hanzogui/lucide-icons-2'
-import { Theme, XGroup, XStack, YStack } from '@hanzo/gui'
+import { Theme, XGroup, XStack, YStack } from 'hanzogui'
 
 export function ButtonDemo() {
   return (

package/src/CardDemo.tsx

@@ -1,5 +1,5 @@
-import type { CardProps } from '@hanzo/gui'
-import { Button, Card, H2, Image, Paragraph, Theme, XStack } from '@hanzo/gui'
+import type { CardProps } from 'hanzogui'
+import { Button, Card, H2, Image, Paragraph, Theme, XStack } from 'hanzogui'
 
 export function CardDemo() {
   return (

package/src/CheckboxDemo.tsx

@@ -1,6 +1,6 @@
 import { Check as CheckIcon } from '@hanzogui/lucide-icons-2'
-import type { CheckboxProps } from '@hanzo/gui'
-import { Checkbox, Label, Theme, XStack, YStack } from '@hanzo/gui'
+import type { CheckboxProps } from 'hanzogui'
+import { Checkbox, Label, Theme, XStack, YStack } from 'hanzogui'
 
 export function CheckboxDemo() {
   return (

package/src/CheckboxHeadlessDemo.tsx

@@ -5,7 +5,7 @@ import { Check, Minus } from '@hanzogui/lucide-icons-2'
 
 import type { View } from 'react-native'
 import { Pressable } from 'react-native'
-import { Label, XStack, YStack } from '@hanzo/gui'
+import { Label, XStack, YStack } from 'hanzogui'
 
 export function CheckboxHeadlessDemo() {
   return (

package/src/CheckboxUnstyledDemo.tsx

@@ -1,7 +1,7 @@
 import { createCheckbox } from '@hanzogui/checkbox'
 import { View, styled } from '@hanzogui/core'
 import { Check } from '@hanzogui/lucide-icons-2'
-import { Label, XStack, YStack } from '@hanzo/gui'
+import { Label, XStack, YStack } from 'hanzogui'
 
 const Frame = styled(View, {
   borderWidth: 1,

package/src/ColorsDemo.tsx

@@ -10,7 +10,7 @@ import {
   yellow,
   yellowDark,
 } from '@hanzogui/colors'
-import { H2, Paragraph, Separator, Square, XStack, YStack } from '@hanzo/gui'
+import { H2, Paragraph, Separator, Square, XStack, YStack } from 'hanzogui'
 
 const colorGroups = ['gray', 'blue', 'green', 'yellow', 'red'] as const
 

package/src/ContextMenuDemo.tsx

@@ -1,7 +1,7 @@
 import { ContextMenu } from '@hanzogui/context-menu'
 import { Calendar, Check, ChevronRight } from '@hanzogui/lucide-icons-2'
 import React from 'react'
-import { Text, View, YStack } from '@hanzo/gui'
+import { Text, View, YStack } from 'hanzogui'
 
 /**
  * Note: you'll want to use createMenu() to customize further.

package/src/DialogDemo.tsx

@@ -15,7 +15,7 @@ import {
   View,
   XGroup,
   XStack,
-} from '@hanzo/gui'
+} from 'hanzogui'
 import { SelectDemoContents } from './SelectDemo'
 
 type DialogMode = 'plain' | 'adapt' | 'keepMounted'

package/src/FormsDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { SizeTokens } from '@hanzo/gui'
+import type { SizeTokens } from 'hanzogui'
 import {
   Button,
   Form,
@@ -11,7 +11,7 @@ import {
   XGroup,
   Label,
   YStack,
-} from '@hanzo/gui'
+} from 'hanzogui'
 
 export function FormsDemo(props: { size: SizeTokens }) {
   const [status, setStatus] = React.useState<'off' | 'submitting' | 'submitted'>('off')

package/src/GroupDemo.tsx

@@ -1,5 +1,5 @@
 import { Activity, Airplay } from '@hanzogui/lucide-icons-2'
-import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from '@hanzo/gui'
+import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from 'hanzogui'
 
 export function GroupDemo() {
   return (

package/src/HeadingsDemo.tsx

@@ -1,4 +1,4 @@
-import { H1, H2, H3, H4, H5, H6, YStack } from '@hanzo/gui'
+import { H1, H2, H3, H4, H5, H6, YStack } from 'hanzogui'
 
 export function HeadingsDemo() {
   return (

package/src/InputsDemo.tsx

@@ -1,5 +1,5 @@
-import type { SizeTokens } from '@hanzo/gui'
-import { Button, Input, TextArea, XStack, YStack } from '@hanzo/gui'
+import type { SizeTokens } from 'hanzogui'
+import { Button, Input, TextArea, XStack, YStack } from 'hanzogui'
 
 export function InputsDemo() {
   return (

package/src/LabelDemo.tsx

@@ -1,4 +1,4 @@
-import { Input, Label, Switch, XStack, YStack } from '@hanzo/gui'
+import { Input, Label, Switch, XStack, YStack } from 'hanzogui'
 
 export function LabelDemo() {
   return (

package/src/LinearGradientDemo.tsx

@@ -1,4 +1,4 @@
-import { XStack } from '@hanzo/gui'
+import { XStack } from 'hanzogui'
 import { LinearGradient } from '@hanzogui/linear-gradient'
 
 export function LinearGradientDemo() {

package/src/ListItemDemo.tsx

@@ -1,5 +1,5 @@
 import { ChevronRight, Cloud, Moon, Star, Sun } from '@hanzogui/lucide-icons-2'
-import { ListItem, Separator, Theme, XStack, YGroup } from '@hanzo/gui'
+import { ListItem, Separator, Theme, XStack, YGroup } from 'hanzogui'
 
 export function ListItemDemo() {
   return (
@@ -19,11 +19,13 @@ function ListItemDemo1() {
       borderWidth={1}
       borderColor="$borderColor"
       rounded="$4"
+      overflow="hidden"
       width={240}
       size="$4"
     >
       <YGroup.Item>
         <ListItem
+          gap="$3"
           icon={Star}
           title="Star"
           subTitle={<ListItem.Subtitle>Twinkles</ListItem.Subtitle>}
@@ -31,13 +33,19 @@ function ListItemDemo1() {
         />
       </YGroup.Item>
       <YGroup.Item>
-        <ListItem icon={Moon}>Moon</ListItem>
+        <ListItem gap="$3" icon={Moon}>
+          Moon
+        </ListItem>
       </YGroup.Item>
       <YGroup.Item>
-        <ListItem icon={Sun}>Sun</ListItem>
+        <ListItem gap="$3" icon={Sun}>
+          Sun
+        </ListItem>
       </YGroup.Item>
       <YGroup.Item>
-        <ListItem icon={Cloud}>Cloud</ListItem>
+        <ListItem gap="$3" icon={Cloud}>
+          Cloud
+        </ListItem>
       </YGroup.Item>
     </YGroup>
   )
@@ -50,15 +58,28 @@ function ListItemDemo2() {
       borderWidth={1}
       borderColor="$borderColor"
       rounded="$4"
+      overflow="hidden"
       width={240}
       size="$5"
     >
       <YGroup.Item>
-        <ListItem title="Star" subTitle="Subtitle" icon={Star} iconAfter={ChevronRight} />
+        <ListItem
+          gap="$3"
+          title="Star"
+          subTitle="Subtitle"
+          icon={Star}
+          iconAfter={ChevronRight}
+        />
       </YGroup.Item>
       <Separator />
       <YGroup.Item>
-        <ListItem title="Moon" subTitle="Subtitle" icon={Moon} iconAfter={ChevronRight} />
+        <ListItem
+          gap="$3"
+          title="Moon"
+          subTitle="Subtitle"
+          icon={Moon}
+          iconAfter={ChevronRight}
+        />
       </YGroup.Item>
     </YGroup>
   )

package/src/LucideIconsDemo.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import * as LucideIcons from '@hanzogui/lucide-icons-2'
 
 import { ScrollView } from 'react-native'
-import { Input, Paragraph, Spacer, YStack, useDebounceValue } from '@hanzo/gui'
+import { Input, Paragraph, Spacer, YStack, useDebounceValue } from 'hanzogui'
 
 import { Grid } from './Grid'
 

package/src/MenuDemo.tsx

@@ -9,10 +9,10 @@ import {
 } from '@hanzogui/lucide-icons-2'
 import { Menu } from '@hanzogui/menu'
 import React from 'react'
-import { Button } from '@hanzo/gui'
+import { Button } from 'hanzogui'
 
 /**
- * Menu Demo using GUI Menu component.
+ * Menu Demo using Gui Menu component.
  * Automatically uses native menus on iOS/Android, web menus on web.
  * No configuration needed - it just works!
  */

package/src/NewInputsDemo.tsx

@@ -1,5 +1,5 @@
-import type { SizeTokens } from '@hanzo/gui'
-import { Button, Theme, XStack, YStack } from '@hanzo/gui'
+import type { SizeTokens } from 'hanzogui'
+import { Button, Theme, XStack, YStack } from 'hanzogui'
 import { Input, TextArea } from '@hanzogui/input'
 
 export function NewInputsDemo() {

package/src/PopoverDemo.tsx

@@ -5,7 +5,7 @@ import {
   ChevronUp,
 } from '@hanzogui/lucide-icons-2'
 import { useState } from 'react'
-import type { PopoverProps } from '@hanzo/gui'
+import type { PopoverProps } from 'hanzogui'
 import {
   Adapt,
   Button,
@@ -17,7 +17,7 @@ import {
   styled,
   XStack,
   YStack,
-} from '@hanzo/gui'
+} from 'hanzogui'
 
 export function PopoverDemo() {
   const [shouldAdapt, setShouldAdapt] = useState(true)

package/src/ProgressDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Paragraph, Progress, Slider, Theme, XStack, YStack } from '@hanzo/gui'
+import { Button, Paragraph, Progress, Slider, Theme, XStack, YStack } from 'hanzogui'
 import { Play, RotateCcw } from '@hanzogui/lucide-icons-2'
 
 export function ProgressDemo() {

package/src/RadioGroupDemo.tsx

@@ -1,5 +1,5 @@
-import type { SizeTokens } from '@hanzo/gui'
-import { Label, RadioGroup, Theme, XStack, YStack } from '@hanzo/gui'
+import type { SizeTokens } from 'hanzogui'
+import { Label, RadioGroup, Theme, XStack, YStack } from 'hanzogui'
 
 export function RadioGroupDemo() {
   return (

package/src/RadioGroupHeadlessDemo.tsx

@@ -10,7 +10,7 @@ import {
 import { RovingFocusGroup } from '@hanzogui/roving-focus'
 import React from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
-import { isWeb, useTheme } from '@hanzo/gui'
+import { isWeb, useTheme } from 'hanzogui'
 
 const RadioGroupContext = React.createContext<RadioGroupContextValue>({})
 const RadioGroupItemContext = React.createContext<RadioGroupItemContextValue>({

package/src/RadioGroupUnstyledDemo.tsx

@@ -1,4 +1,4 @@
-import { Label, XStack, YStack, styled } from '@hanzo/gui'
+import { Label, XStack, YStack, styled } from 'hanzogui'
 
 import { createRadioGroup } from '@hanzogui/radio-group'
 

package/src/ReplaceThemeDemo.tsx

@@ -9,7 +9,7 @@ import {
   YStack,
   useForceUpdate,
   useIsomorphicLayoutEffect,
-} from '@hanzo/gui'
+} from 'hanzogui'
 
 export function ReplaceThemeDemo() {
   const [theme, setTheme] = React.useState<any>()

package/src/ScrollViewDemo.tsx

@@ -1,4 +1,4 @@
-import { Circle, ScrollView, Square, XStack } from '@hanzo/gui'
+import { Circle, ScrollView, Square, XStack } from 'hanzogui'
 
 export function ScrollViewDemo() {
   return (

package/src/SelectDemo.tsx

@@ -1,18 +1,9 @@
 import { Check, ChevronDown, ChevronUp } from '@hanzogui/lucide-icons-2'
 import React from 'react'
 
-import type { FontSizeTokens, SelectProps } from '@hanzo/gui'
-import {
-  Adapt,
-  Label,
-  Select,
-  Sheet,
-  Theme,
-  XStack,
-  YStack,
-  getFontSize,
-} from '@hanzo/gui'
-import { LinearGradient } from 'gui/linear-gradient'
+import type { FontSizeTokens, SelectProps } from 'hanzogui'
+import { Adapt, Label, Select, Sheet, Theme, XStack, YStack, getFontSize } from 'hanzogui'
+import { LinearGradient } from 'hanzogui/linear-gradient'
 
 export function SelectDemo() {
   return (

package/src/SeparatorDemo.tsx

@@ -1,4 +1,4 @@
-import { Paragraph, Separator, XStack, YStack } from '@hanzo/gui'
+import { Paragraph, Separator, XStack, YStack } from 'hanzogui'
 
 export function SeparatorDemo() {
   return (

package/src/ShapesDemo.tsx

@@ -1,4 +1,4 @@
-import { Circle, Square, XStack } from '@hanzo/gui'
+import { Circle, Square, XStack } from 'hanzogui'
 
 export function ShapesDemo() {
   return (

package/src/SheetDemo.tsx

@@ -2,7 +2,7 @@ import { ChevronDown, ChevronUp } from '@hanzogui/lucide-icons-2'
 import type { SheetProps } from '@hanzogui/sheet'
 import { Sheet } from '@hanzogui/sheet'
 import React, { memo } from 'react'
-import { Button, H2, Input, Paragraph, XStack, YStack } from '@hanzo/gui'
+import { Button, H2, Input, Paragraph, XStack, YStack } from 'hanzogui'
 
 const spModes = ['percent', 'constant', 'fit', 'mixed'] as const
 

package/src/SliderDemo.tsx

@@ -1,5 +1,5 @@
-import type { SliderProps } from '@hanzo/gui'
-import { Slider, Theme, XStack } from '@hanzo/gui'
+import type { SliderProps } from 'hanzogui'
+import { Slider, Theme, XStack } from 'hanzogui'
 
 export function SliderDemo() {
   return (

package/src/SpinnerDemo.tsx

@@ -1,4 +1,4 @@
-import { Spinner, YStack } from '@hanzo/gui'
+import { Spinner, YStack } from 'hanzogui'
 
 export function SpinnerDemo() {
   return (

package/src/StacksDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { XStack, YStack, ZStack } from '@hanzo/gui'
+import { XStack, YStack, ZStack } from 'hanzogui'
 
 export function StacksDemo() {
   return (

package/src/SwitchDemo.tsx

@@ -1,5 +1,5 @@
-import type { SizeTokens } from '@hanzo/gui'
-import { Label, Separator, Switch, Theme, XStack, YStack } from '@hanzo/gui'
+import type { SizeTokens } from 'hanzogui'
+import { Label, Separator, Switch, Theme, XStack, YStack } from 'hanzogui'
 
 export function SwitchDemo() {
   return (

package/src/SwitchHeadlessDemo.tsx

@@ -4,7 +4,7 @@ import { useSwitch } from '@hanzogui/switch-headless'
 
 import type { View } from 'react-native'
 import { Animated, Pressable } from 'react-native'
-import { Label, XStack, YStack } from '@hanzo/gui'
+import { Label, XStack, YStack } from 'hanzogui'
 
 export function SwitchHeadlessDemo() {
   return (

package/src/SwitchUnstyledDemo.tsx

@@ -1,6 +1,6 @@
 import { View, styled } from '@hanzogui/core'
 import { createSwitch } from '@hanzogui/switch'
-import { Label, XStack, YStack } from '@hanzo/gui'
+import { Label, XStack, YStack } from 'hanzogui'
 
 const Frame = styled(View, {
   width: 40,

package/src/TabsAdvancedDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { ViewProps, TabLayout, TabsTabProps } from '@hanzo/gui'
+import type { ViewProps, TabLayout, TabsTabProps } from 'hanzogui'
 import {
   AnimatePresence,
   Button,
@@ -9,7 +9,7 @@ import {
   XStack,
   YStack,
   styled,
-} from '@hanzo/gui'
+} from 'hanzogui'
 
 const demos = ['background', 'underline'] as const
 const demosTitle: Record<(typeof demos)[number], string> = {
@@ -108,6 +108,7 @@ const TabsAdvancedBackground = () => {
           />
         )}
       </AnimatePresence>
+
       <AnimatePresence>
         {activeAt && (
           <TabsRovingIndicator
@@ -120,6 +121,7 @@ const TabsAdvancedBackground = () => {
           />
         )}
       </AnimatePresence>
+
       <YStack position="relative">
         <Tabs.List
           loop={false}
@@ -129,7 +131,6 @@ const TabsAdvancedBackground = () => {
         >
           <Tabs.Tab
             unstyled
-            paddingVertical="$2"
             paddingHorizontal="$3"
             value="tab1"
             onInteraction={handleOnInteraction}
@@ -138,7 +139,6 @@ const TabsAdvancedBackground = () => {
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
-            paddingVertical="$2"
             paddingHorizontal="$3"
             value="tab2"
             onInteraction={handleOnInteraction}
@@ -147,7 +147,6 @@ const TabsAdvancedBackground = () => {
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
-            paddingVertical="$2"
             paddingHorizontal="$3"
             value="tab3"
             onInteraction={handleOnInteraction}
@@ -260,34 +259,37 @@ const TabsAdvancedUnderline = () => {
           <Tabs.Tab
             unstyled
             paddingHorizontal="$3"
-            paddingVertical="$2"
             value="tab1"
             onInteraction={handleOnInteraction}
           >
-            <SizableText>Profile</SizableText>
+            <SizableText select="none" cursor="default">
+              Profile
+            </SizableText>
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
             paddingHorizontal="$3"
-            paddingVertical="$2"
             value="tab2"
             onInteraction={handleOnInteraction}
           >
-            <SizableText>Connections</SizableText>
+            <SizableText select="none" cursor="default">
+              Connections
+            </SizableText>
           </Tabs.Tab>
           <Tabs.Tab
             unstyled
             paddingHorizontal="$3"
-            paddingVertical="$2"
             value="tab3"
             onInteraction={handleOnInteraction}
           >
-            <SizableText>Notifications</SizableText>
+            <SizableText select="none" cursor="default">
+              Notifications
+            </SizableText>
           </Tabs.Tab>
         </Tabs.List>
       </YStack>
 
-      <AnimatePresence exitBeforeEnter custom={{ direction }} initial={false}>
+      <AnimatePresence mode="wait" custom={{ direction }} initial={false}>
         <AnimatedYStack key={currentTab}>
           <Tabs.Content
             value={currentTab}
@@ -318,7 +320,7 @@ const TabsRovingIndicator = ({ active, ...props }: { active?: boolean } & ViewPr
         opacity: 0,
       }}
       {...(active && {
-        backgroundColor: '$color8',
+        backgroundColor: '$color5',
         opacity: 0.6,
       })}
       {...props}

package/src/TabsDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { TabsContentProps } from '@hanzo/gui'
+import type { TabsContentProps } from 'hanzogui'
 import {
   Button,
   H5,
@@ -10,7 +10,7 @@ import {
   YStack,
   isWeb,
   useWindowDimensions,
-} from '@hanzo/gui'
+} from 'hanzogui'
 
 const demos = ['horizontal', 'vertical'] as const
 const demosTitle: Record<(typeof demos)[number], string> = {

package/src/TabsHeadlessDemo.tsx

@@ -7,7 +7,7 @@ import {
   YStack,
   isWeb,
   styled,
-} from '@hanzo/gui'
+} from 'hanzogui'
 import { createTabs } from '@hanzogui/tabs'
 import { getButtonSized } from '@hanzogui/get-button-sized'
 

package/src/TextDemo.tsx

@@ -1,4 +1,4 @@
-import { Em, Paragraph, SizableText, Span, Strong, YStack } from '@hanzo/gui'
+import { Em, Paragraph, SizableText, Span, Strong, YStack } from 'hanzogui'
 
 export function TextDemo() {
   return (

package/src/ThemeBuilderDemo.tsx

@@ -1,5 +1,5 @@
-import type { SquareProps, ThemeName } from '@hanzo/gui'
-import { Square, XStack, YStack } from '@hanzo/gui'
+import type { SquareProps, ThemeName } from 'hanzogui'
+import { Square, XStack, YStack } from 'hanzogui'
 
 export function ThemeBuilderDemo() {
   return (

package/src/ThemeInverseDemo.tsx

@@ -1,4 +1,4 @@
-import { Button, H5, Theme, XStack, YStack } from '@hanzo/gui'
+import { Button, H5, Theme, XStack, YStack } from 'hanzogui'
 
 export function ThemeInverseDemo() {
   return (