@hanzogui/demos 8.0.0 → 8.0.2

package/dist/esm/TokensDemo.native.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getConfig } from "@hanzogui/core";
 import React from "react";
-import { Button, H2, H3, H4, Square, XGroup, XStack, YStack } from "hanzogui";
+import { Button, H2, H3, H4, Square, XGroup, XStack, YStack } from "@hanzo/gui";
 var sections = [{
   name: `Size`,
   key: `size`

package/dist/esm/TooltipDemo.mjs

@@ -1,5 +1,5 @@
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle } from "@hanzogui/lucide-icons-2";
-import { Button, Paragraph, Theme, Tooltip, TooltipGroup, XStack, YStack } from "hanzogui";
+import { Button, Paragraph, Theme, Tooltip, TooltipGroup, XStack, YStack } from "@hanzo/gui";
 import { jsx, jsxs } from "react/jsx-runtime";
 function TooltipDemo() {
   return /* @__PURE__ */jsx(Theme, {

package/dist/esm/TooltipDemo.native.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle } from "@hanzogui/lucide-icons-2";
-import { Button, Paragraph, Theme, Tooltip, TooltipGroup, XStack, YStack } from "hanzogui";
+import { Button, Paragraph, Theme, Tooltip, TooltipGroup, XStack, YStack } from "@hanzo/gui";
 function TooltipDemo() {
   return /* @__PURE__ */_jsx(Theme, {
     name: "surface2",

package/dist/esm/UpdateThemeDemo.mjs

@@ -1,7 +1,7 @@
 import React from "react";
 import { config } from "@hanzogui/config/v3";
 import { addTheme, updateTheme } from "@hanzogui/theme";
-import { Button, Square, Theme, XStack, YStack, getVariableValue, useIsomorphicLayoutEffect } from "hanzogui";
+import { Button, Square, Theme, XStack, YStack, getVariableValue, useIsomorphicLayoutEffect } from "@hanzo/gui";
 import { jsx, jsxs } from "react/jsx-runtime";
 const colors = config.tokens.color;
 const colorKeys = Object.keys(colors);

package/dist/esm/UpdateThemeDemo.native.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { config } from "@hanzogui/config/v3";
 import { addTheme, updateTheme } from "@hanzogui/theme";
-import { Button, Square, Theme, XStack, YStack, getVariableValue, useIsomorphicLayoutEffect } from "hanzogui";
+import { Button, Square, Theme, XStack, YStack, getVariableValue, useIsomorphicLayoutEffect } from "@hanzo/gui";
 var colors = config.tokens.color;
 var colorKeys = Object.keys(colors);
 function UpdateThemeDemo() {

package/dist/esm/hanzogui.config.mjs

@@ -1,5 +1,5 @@
 import { config } from "@hanzogui/dev-config";
-import { createGui } from "hanzogui";
+import { createGui } from "@hanzo/gui";
 const tamaConf = createGui(config);
 var hanzogui_config_default = tamaConf;
 export { hanzogui_config_default as default };

package/dist/esm/hanzogui.config.native.js

@@ -1,5 +1,5 @@
 import { config } from "@hanzogui/dev-config";
-import { createGui } from "hanzogui";
+import { createGui } from "@hanzo/gui";
 var tamaConf = createGui(config);
 var hanzogui_config_default = tamaConf;
 export { hanzogui_config_default as default };

package/dist/esm/useOnIntersecting.mjs

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { isWeb, useEvent } from "hanzogui";
+import { isWeb, useEvent } from "@hanzo/gui";
 function useIsIntersecting(refs, {
   once,
   ...opts

package/dist/esm/useOnIntersecting.native.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { isWeb, useEvent } from "hanzogui";
+import { isWeb, useEvent } from "@hanzo/gui";
 function useIsIntersecting(refs) {
   var {
     once,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzogui/demos",
-  "version": "8.0.0",
+  "version": "8.0.2",
   "source": "demos/src/index.tsx",
   "files": [
     "src",
@@ -51,7 +51,7 @@
     "@hanzogui/button": "8.0.0",
     "@hanzogui/checkbox": "8.0.0",
     "@hanzogui/checkbox-headless": "8.0.0",
-    "@hanzogui/colors": "8.0.0",
+    "@hanzogui/colors": "8.0.1",
     "@hanzogui/config": "8.0.0",
     "@hanzogui/context-menu": "8.0.0",
     "@hanzogui/core": "8.0.0",
@@ -60,7 +60,7 @@
     "@hanzogui/input": "8.0.0",
     "@hanzogui/linear-gradient": "8.0.0",
     "@hanzogui/list-item": "8.0.0",
-    "@hanzogui/logo": "8.0.0",
+    "@hanzogui/logo": "8.0.1",
     "@hanzogui/lucide-icons-2": "8.0.0",
     "@hanzogui/menu": "8.0.0",
     "@hanzogui/popover": "8.0.0",
@@ -78,7 +78,7 @@
     "@hanzogui/dev-config": "8.0.0",
     "@hanzogui/theme": "8.0.0",
     "@hanzogui/toast": "8.0.0",
-    "hanzogui": "8.0.0"
+    "@hanzo/gui": "8.0.0"
   },
   "devDependencies": {
     "@hanzogui/build": "8.0.0",

package/src/AccordionDemo.tsx

@@ -1,5 +1,5 @@
 import { ChevronDown } from '@hanzogui/lucide-icons-2'
-import { Accordion, Paragraph, Square } from 'hanzogui'
+import { Accordion, Paragraph, Square } from '@hanzo/gui'
 
 export function AccordionDemo() {
   return (

package/src/AddThemeDemo.tsx

@@ -1,7 +1,7 @@
 import { addTheme } from '@hanzogui/theme'
 import React from 'react'
 
-import { Button, H3, Theme, View, YStack } from 'hanzogui'
+import { Button, H3, Theme, View, YStack } from '@hanzo/gui'
 
 export function AddThemeDemo() {
   const [theme, setTheme] = React.useState<any>()

package/src/AlertDialogDemo.tsx

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

package/src/AnimationsDelayDemo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AnimatePresence, Button, Square, XStack, YStack, isWeb } from 'hanzogui'
+import { AnimatePresence, Button, Square, XStack, YStack, isWeb } from '@hanzo/gui'
 
 import { useIsIntersecting } from './useOnIntersecting'
 

package/src/AnimationsDemo.tsx

@@ -1,6 +1,6 @@
 import { LogoIcon } from '@hanzogui/logo'
 import { Play } from '@hanzogui/lucide-icons-2'
-import { Button, isWeb, Square, useControllableState, Image, useEvent } from 'hanzogui'
+import { Button, isWeb, Square, useControllableState, Image, useEvent } from '@hanzo/gui'
 
 export function AnimationsDemo(props) {
   const [positionI, setPositionI] = useControllableState({

package/src/AnimationsEnterDemo.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { LogoIcon } from '@hanzogui/logo'
 
-import { Button, Square, YStack, isWeb } from 'hanzogui'
+import { Button, Square, YStack, isWeb } from '@hanzo/gui'
 
 import { useIsIntersecting } from './useOnIntersecting'
 

package/src/AnimationsHoverDemo.tsx

@@ -1,5 +1,5 @@
 import { LogoIcon } from '@hanzogui/logo'
-import { Square } from 'hanzogui'
+import { Square } from '@hanzo/gui'
 
 export function AnimationsHoverDemo() {
   return (

package/src/AnimationsPresenceDemo.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { AnimatePresence } from '@hanzogui/animate-presence'
 import { ArrowLeft, ArrowRight } from '@hanzogui/lucide-icons-2'
 
-import { Button, Image, XStack, YStack, styled } from 'hanzogui'
+import { Button, Image, XStack, YStack, styled } from '@hanzo/gui'
 
 // @ts-ignore
 import photo1 from '../../public/photo1.jpg'

package/src/AnimationsTimingDemo.tsx

@@ -1,5 +1,5 @@
 import { LogoIcon } from '@hanzogui/logo'
-import { Square } from 'hanzogui'
+import { Square } from '@hanzo/gui'
 
 export function AnimationsTimingDemo() {
   return (

package/src/AvatarDemo.tsx

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

package/src/BoxShadowTokenDemo.tsx

@@ -1,4 +1,4 @@
-import { styled, View, Text, YStack } from 'hanzogui'
+import { styled, View, Text, YStack } from '@hanzo/gui'
 
 // styled() with boxShadow containing embedded $token
 // if web imports are picked up on native, this resolves to var(--shadowColor)

package/src/BrandTokensDemo.tsx

@@ -0,0 +1,105 @@
+import { Button, Card, H2, Paragraph, Text, Theme, XStack, YStack } from 'hanzogui'
+
+// Proof surface for the token layer: true-black neutral ramp, one accent per
+// white-label brand (read straight from each brand's generated theme — the
+// $color9 accent slot), Geist type. Open with ?demo=BrandTokens.
+// Brand accent SoT: pkgs/core/themes/src/brands.ts.
+
+const BRANDS = ['hanzo', 'lux', 'zoo', 'pars'] as const
+
+const SURFACES: Array<[string, string, string]> = [
+  ['background', '$background', '#000 canvas'],
+  ['color2', '$color2', '#0a0a0a surface'],
+  ['color3', '$color3', '#111 raised'],
+  ['color4', '$color4', '#171717 elevated'],
+]
+
+export function BrandTokensDemo() {
+  return (
+    <Theme name="dark">
+      <YStack backgroundColor="$background" padding="$6" gap="$5" minHeight={640}>
+        <YStack gap="$2">
+          <H2 fontFamily="$heading" color="$color12">
+            Hanzo GUI — design tokens
+          </H2>
+          <Paragraph color="$color11" fontFamily="$body">
+            True-black canvas · one accent per brand · Geist type system
+          </Paragraph>
+        </YStack>
+
+        <YStack gap="$2">
+          <Text color="$color11" fontFamily="$mono" fontSize="$2">
+            neutral surface ramp
+          </Text>
+          <XStack gap="$3" flexWrap="wrap">
+            {SURFACES.map(([name, tok, label]) => (
+              <YStack
+                key={name}
+                backgroundColor={tok}
+                width={160}
+                height={96}
+                borderRadius={12}
+                borderWidth={1}
+                borderColor="$borderColor"
+                padding="$3"
+                justifyContent="flex-end"
+              >
+                <Text color="$color12" fontFamily="$mono" fontSize="$3">
+                  {name}
+                </Text>
+                <Text color="$color10" fontSize="$2">
+                  {label}
+                </Text>
+              </YStack>
+            ))}
+          </XStack>
+        </YStack>
+
+        <YStack gap="$2">
+          <Text color="$color11" fontFamily="$mono" fontSize="$2">
+            per-brand accent (applied sparingly over the shared canvas)
+          </Text>
+          <XStack gap="$4" flexWrap="wrap">
+            {BRANDS.map((b) => (
+              <Theme key={b} name={b}>
+                <Card
+                  backgroundColor="$color2"
+                  borderWidth={1}
+                  borderColor="$borderColor"
+                  borderRadius={12}
+                  padding="$4"
+                  width={210}
+                  gap="$3"
+                >
+                  <XStack alignItems="center" gap="$2">
+                    <YStack
+                      width={14}
+                      height={14}
+                      borderRadius={999}
+                      backgroundColor="$color9"
+                    />
+                    <Text color="$color12" fontFamily="$heading" fontSize="$5">
+                      {b}
+                    </Text>
+                  </XStack>
+                  <YStack
+                    height={44}
+                    borderRadius={8}
+                    backgroundColor="$color9"
+                    alignItems="center"
+                    justifyContent="center"
+                  >
+                    <Text color="$color1" fontSize="$3" fontWeight="700">
+                      Primary CTA
+                    </Text>
+                  </YStack>
+                  <Button>Themed button</Button>
+                </Card>
+              </Theme>
+            ))}
+          </XStack>
+        </YStack>
+      </YStack>
+    </Theme>
+  )
+}

package/src/BuildAButtonDemo.tsx

@@ -1,6 +1,6 @@
 import { Drumstick, Hand } from '@hanzogui/lucide-icons-2'
-import type { ButtonProps, ThemeName } from 'hanzogui'
-import { Button, XStack, YStack } from 'hanzogui'
+import type { ButtonProps, ThemeName } from '@hanzo/gui'
+import { Button, XStack, YStack } from '@hanzo/gui'
 
 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 'hanzogui'
+import { Theme, XGroup, XStack, YStack } from '@hanzo/gui'
 
 export function ButtonDemo() {
   return (

package/src/CardDemo.tsx

@@ -1,5 +1,5 @@
-import type { CardProps } from 'hanzogui'
-import { Button, Card, H2, Image, Paragraph, Theme, XStack } from 'hanzogui'
+import type { CardProps } from '@hanzo/gui'
+import { Button, Card, H2, Image, Paragraph, Theme, XStack } from '@hanzo/gui'
 
 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 'hanzogui'
-import { Checkbox, Label, Theme, XStack, YStack } from 'hanzogui'
+import type { CheckboxProps } from '@hanzo/gui'
+import { Checkbox, Label, Theme, XStack, YStack } from '@hanzo/gui'
 
 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 'hanzogui'
+import { Label, XStack, YStack } from '@hanzo/gui'
 
 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 'hanzogui'
+import { Label, XStack, YStack } from '@hanzo/gui'
 
 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 'hanzogui'
+import { H2, Paragraph, Separator, Square, XStack, YStack } from '@hanzo/gui'
 
 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 'hanzogui'
+import { Text, View, YStack } from '@hanzo/gui'
 
 /**
  * Note: you'll want to use createMenu() to customize further.

package/src/DialogDemo.tsx

@@ -15,7 +15,7 @@ import {
   View,
   XGroup,
   XStack,
-} from 'hanzogui'
+} from '@hanzo/gui'
 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 'hanzogui'
+import type { SizeTokens } from '@hanzo/gui'
 import {
   Button,
   Form,
@@ -11,7 +11,7 @@ import {
   XGroup,
   Label,
   YStack,
-} from 'hanzogui'
+} from '@hanzo/gui'
 
 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 'hanzogui'
+import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from '@hanzo/gui'
 
 export function GroupDemo() {
   return (

package/src/HeadingsDemo.tsx

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

package/src/InputsDemo.tsx

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

package/src/LabelDemo.tsx

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

package/src/LinearGradientDemo.tsx

@@ -1,4 +1,4 @@
-import { XStack } from 'hanzogui'
+import { XStack } from '@hanzo/gui'
 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 'hanzogui'
+import { ListItem, Separator, Theme, XStack, YGroup } from '@hanzo/gui'
 
 export function ListItemDemo() {
   return (

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 'hanzogui'
+import { Input, Paragraph, Spacer, YStack, useDebounceValue } from '@hanzo/gui'
 
 import { Grid } from './Grid'
 

package/src/MenuDemo.tsx

@@ -9,7 +9,7 @@ import {
 } from '@hanzogui/lucide-icons-2'
 import { Menu } from '@hanzogui/menu'
 import React from 'react'
-import { Button } from 'hanzogui'
+import { Button } from '@hanzo/gui'
 
 /**
  * Menu Demo using Gui Menu component.

package/src/NewInputsDemo.tsx

@@ -1,5 +1,5 @@
-import type { SizeTokens } from 'hanzogui'
-import { Button, Theme, XStack, YStack } from 'hanzogui'
+import type { SizeTokens } from '@hanzo/gui'
+import { Button, Theme, XStack, YStack } from '@hanzo/gui'
 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 'hanzogui'
+import type { PopoverProps } from '@hanzo/gui'
 import {
   Adapt,
   Button,
@@ -17,7 +17,7 @@ import {
   styled,
   XStack,
   YStack,
-} from 'hanzogui'
+} from '@hanzo/gui'
 
 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 'hanzogui'
+import { Button, Paragraph, Progress, Slider, Theme, XStack, YStack } from '@hanzo/gui'
 import { Play, RotateCcw } from '@hanzogui/lucide-icons-2'
 
 export function ProgressDemo() {

package/src/RadioGroupDemo.tsx

@@ -1,5 +1,5 @@
-import type { SizeTokens } from 'hanzogui'
-import { Label, RadioGroup, Theme, XStack, YStack } from 'hanzogui'
+import type { SizeTokens } from '@hanzo/gui'
+import { Label, RadioGroup, Theme, XStack, YStack } from '@hanzo/gui'
 
 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 'hanzogui'
+import { isWeb, useTheme } from '@hanzo/gui'
 
 const RadioGroupContext = React.createContext<RadioGroupContextValue>({})
 const RadioGroupItemContext = React.createContext<RadioGroupItemContextValue>({

package/src/RadioGroupUnstyledDemo.tsx

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

package/src/ReplaceThemeDemo.tsx

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

package/src/ScrollViewDemo.tsx

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

package/src/SelectDemo.tsx

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

package/src/SeparatorDemo.tsx

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

package/src/ShapesDemo.tsx

@@ -1,4 +1,4 @@
-import { Circle, Square, XStack } from 'hanzogui'
+import { Circle, Square, XStack } from '@hanzo/gui'
 
 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 'hanzogui'
+import { Button, H2, Input, Paragraph, XStack, YStack } from '@hanzo/gui'
 
 const spModes = ['percent', 'constant', 'fit', 'mixed'] as const
 

package/src/SliderDemo.tsx

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

package/src/SpinnerDemo.tsx

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

package/src/StacksDemo.tsx

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