mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-23 02:31:31 +00:00
Retire Cloud and Team as products of their own
The platform is what they were, so the menus name it once and the column under it lists what the platform actually offers. Co-authored-by: Hanzo Dev <[email protected]>
This commit is contained in:
Hanzo Dev
@@ -1,7 +1,6 @@
|
||||
import {
|
||||
type ThemeName,
|
||||
Button,
|
||||
Card,
|
||||
H2,
|
||||
Paragraph,
|
||||
Text,
|
||||
@@ -72,7 +71,8 @@ export function BrandTokensDemo() {
|
||||
<XStack gap="$4" flexWrap="wrap">
|
||||
{BRANDS.map((b) => (
|
||||
<Theme key={b} name={b as ThemeName}>
|
||||
<Card
|
||||
<YStack
|
||||
position="relative"
|
||||
backgroundColor="$color2"
|
||||
borderWidth={1}
|
||||
borderColor="$borderColor"
|
||||
@@ -104,7 +104,7 @@ export function BrandTokensDemo() {
|
||||
</Text>
|
||||
</YStack>
|
||||
<Button>Themed button</Button>
|
||||
</Card>
|
||||
</YStack>
|
||||
</Theme>
|
||||
))}
|
||||
</XStack>
|
||||
|
||||
+27
-13
File diff suppressed because one or more lines are too long
@@ -1,5 +1,5 @@
|
||||
import { TitleBar } from '@hanzogui/tauri'
|
||||
import { Button, Card, H1, Paragraph, Text, Theme, XStack, YStack } from '@hanzo/gui'
|
||||
import { Button, H1, Paragraph, Text, Theme, XStack, YStack } from '@hanzo/gui'
|
||||
import type { BrandName } from '@hanzogui/themes'
|
||||
|
||||
const brands: BrandName[] = ['hanzo', 'lux', 'zoo', 'pars']
|
||||
@@ -24,7 +24,8 @@ export function App() {
|
||||
</Paragraph>
|
||||
</YStack>
|
||||
|
||||
<Card
|
||||
<YStack
|
||||
position="relative"
|
||||
backgroundColor="$color2"
|
||||
borderColor="$borderColor"
|
||||
borderWidth={1}
|
||||
@@ -50,7 +51,7 @@ export function App() {
|
||||
</Theme>
|
||||
))}
|
||||
</XStack>
|
||||
</Card>
|
||||
</YStack>
|
||||
</YStack>
|
||||
</YStack>
|
||||
)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useState } from 'react'
|
||||
import { ChevronRight } from '@hanzogui/lucide-icons-2'
|
||||
import { Avatar, Card, H5, Paragraph, XStack, YStack } from '@hanzo/gui'
|
||||
import { Avatar, H5, Paragraph, XStack, YStack } from '@hanzo/gui'
|
||||
import { Link } from '~/components/Link'
|
||||
import { ThemeTintAlt } from '@hanzogui/logo'
|
||||
|
||||
@@ -10,7 +10,10 @@ export function AvatarCard({ title, subtitle, img, link, colorOffset, ...props }
|
||||
return (
|
||||
<ThemeTintAlt offset={colorOffset}>
|
||||
<Link asChild href={link}>
|
||||
<Card
|
||||
<YStack
|
||||
bg="$background"
|
||||
position="relative"
|
||||
rounded="$true"
|
||||
render="a"
|
||||
transition="quickest"
|
||||
flex={1}
|
||||
@@ -23,7 +26,7 @@ export function AvatarCard({ title, subtitle, img, link, colorOffset, ...props }
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
{...props}
|
||||
>
|
||||
<Card.Header>
|
||||
<YStack z={10} mb="auto" p="$true">
|
||||
<XStack justify="space-between">
|
||||
<YStack gap="$2.5">
|
||||
<H5 size="$6" color="$color9" fontFamily="$pixel">
|
||||
@@ -39,12 +42,19 @@ export function AvatarCard({ title, subtitle, img, link, colorOffset, ...props }
|
||||
<Avatar.Fallback bg="$color6" borderColor="$color8" />
|
||||
</Avatar>
|
||||
</XStack>
|
||||
</Card.Header>
|
||||
</YStack>
|
||||
|
||||
<Card.Footer transition="quicker" x={isHovered ? 5 : 0}>
|
||||
<XStack
|
||||
z={5}
|
||||
mt="auto"
|
||||
mb={0}
|
||||
p="$true"
|
||||
transition="quicker"
|
||||
x={isHovered ? 5 : 0}
|
||||
>
|
||||
<ChevronRight size="$1" position="absolute" b="$4" r="$4" color="$color11" />
|
||||
</Card.Footer>
|
||||
</Card>
|
||||
</XStack>
|
||||
</YStack>
|
||||
</Link>
|
||||
</ThemeTintAlt>
|
||||
)
|
||||
|
||||
@@ -1,14 +1,17 @@
|
||||
import { ThemeTintAlt } from '@hanzogui/logo'
|
||||
import { ChevronRight } from '@hanzogui/lucide-icons-2'
|
||||
import { useState } from 'react'
|
||||
import { Avatar, Card, H5, Paragraph, View, XStack, YStack } from '@hanzo/gui'
|
||||
import { Avatar, H5, Paragraph, View, XStack, YStack } from '@hanzo/gui'
|
||||
|
||||
export function LogoCard({ title, subtitle, img, icon, link, colorOffset, ...props }) {
|
||||
const [isHovered, setHovered] = useState(false)
|
||||
|
||||
return (
|
||||
<ThemeTintAlt offset={colorOffset}>
|
||||
<Card
|
||||
<YStack
|
||||
bg="$background"
|
||||
position="relative"
|
||||
rounded="$true"
|
||||
render="a"
|
||||
transition="quickest"
|
||||
flex={1}
|
||||
@@ -23,7 +26,7 @@ export function LogoCard({ title, subtitle, img, icon, link, colorOffset, ...pro
|
||||
{...(props as any)}
|
||||
href={link}
|
||||
>
|
||||
<Card.Header>
|
||||
<YStack z={10} mb="auto" p="$true">
|
||||
<XStack justify="space-between">
|
||||
<YStack gap="$2.5">
|
||||
<H5 size="$6" color="$color9" fontFamily="$pixel">
|
||||
@@ -52,12 +55,19 @@ export function LogoCard({ title, subtitle, img, icon, link, colorOffset, ...pro
|
||||
</Avatar>
|
||||
)}
|
||||
</XStack>
|
||||
</Card.Header>
|
||||
</YStack>
|
||||
|
||||
<Card.Footer transition="quicker" x={isHovered ? 5 : 0}>
|
||||
<XStack
|
||||
z={5}
|
||||
mt="auto"
|
||||
mb={0}
|
||||
p="$true"
|
||||
transition="quicker"
|
||||
x={isHovered ? 5 : 0}
|
||||
>
|
||||
<ChevronRight size="$1" position="absolute" b="$4" r="$4" color="$color11" />
|
||||
</Card.Footer>
|
||||
</Card>
|
||||
</XStack>
|
||||
</YStack>
|
||||
</ThemeTintAlt>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,115 +0,0 @@
|
||||
---
|
||||
title: Card
|
||||
description: Sizable, themeable cards with a flexible API.
|
||||
name: card
|
||||
component: Card
|
||||
package: card
|
||||
demoName: Card
|
||||
---
|
||||
|
||||
<HeroContainer>
|
||||
<CardDemo />
|
||||
</HeroContainer>
|
||||
|
||||
```tsx hero template=Card
|
||||
|
||||
```
|
||||
|
||||
<Highlights
|
||||
features={[
|
||||
`Sizable with a size prop that passes to Card children.`,
|
||||
`Themeable helper props like elevate.`,
|
||||
`Background component that handles positioning.`,
|
||||
]}
|
||||
/>
|
||||
|
||||
## Installation
|
||||
|
||||
Card is already installed in `hanzogui`, or you can install it independently:
|
||||
|
||||
```bash
|
||||
npm install @hanzogui/card
|
||||
```
|
||||
|
||||
## Anatomy
|
||||
|
||||
```tsx
|
||||
import { Card } from '@hanzo/gui' // or '@hanzogui/card'
|
||||
|
||||
export default () => (
|
||||
<Card>
|
||||
<Card.Header />
|
||||
<Card.Footer />
|
||||
{/* any other components */}
|
||||
<Card.Background />
|
||||
</Card>
|
||||
)
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
### Card
|
||||
|
||||
Frame of the card, extends [ThemeableStack props](/docs/components/stacks#themeablestack), adding:
|
||||
|
||||
<PropsTable
|
||||
data={[
|
||||
{
|
||||
name: 'size',
|
||||
type: 'SizeTokens',
|
||||
required: false,
|
||||
description: `Passes size down to all sub-components when set for padding, arrow, borderRadius.`,
|
||||
},
|
||||
{
|
||||
name: 'unstyled',
|
||||
required: false,
|
||||
type: `boolean`,
|
||||
description: `Removes all default Gui styles.`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
### Card.Header
|
||||
|
||||
Extends [ThemeableStack](/docs/components/stacks#themeablestack), adding:
|
||||
|
||||
<PropsTable
|
||||
data={[
|
||||
{
|
||||
name: 'unstyled',
|
||||
required: false,
|
||||
type: `boolean`,
|
||||
description: `Removes all default Gui styles.`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
### Card.Footer
|
||||
|
||||
Extends [ThemeableStack](/docs/components/stacks#themeablestack), adding:
|
||||
|
||||
<PropsTable
|
||||
data={[
|
||||
{
|
||||
name: 'unstyled',
|
||||
required: false,
|
||||
type: `boolean`,
|
||||
description: `Removes all default Gui styles.`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
### Card.Background
|
||||
|
||||
Extends [YStack](/docs/components/stacks), set to `fullscreen` and zIndex below Header/Footer.
|
||||
|
||||
<PropsTable
|
||||
data={[
|
||||
{
|
||||
name: 'unstyled',
|
||||
required: false,
|
||||
type: `boolean`,
|
||||
description: `Removes all default Gui styles.`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@@ -1,115 +0,0 @@
|
||||
---
|
||||
title: Card
|
||||
description: Sizable, themeable cards with a flexible API
|
||||
name: card
|
||||
component: Card
|
||||
package: card
|
||||
demoName: Card
|
||||
---
|
||||
|
||||
<HeroContainer>
|
||||
<CardDemo />
|
||||
</HeroContainer>
|
||||
|
||||
```tsx hero template=Card
|
||||
|
||||
```
|
||||
|
||||
<Highlights
|
||||
features={[
|
||||
`Sizable with a size prop that passes to Card children.`,
|
||||
`Themeable helper props like elevate.`,
|
||||
`Background component that handles positioning.`,
|
||||
]}
|
||||
/>
|
||||
|
||||
## Installation
|
||||
|
||||
Card is already installed in `hanzogui`, or you can install it independently:
|
||||
|
||||
```bash
|
||||
npm install @hanzogui/card
|
||||
```
|
||||
|
||||
## Anatomy
|
||||
|
||||
```tsx
|
||||
import { Card } from '@hanzo/gui' // or '@hanzogui/card'
|
||||
|
||||
export default () => (
|
||||
<Card>
|
||||
<Card.Header />
|
||||
<Card.Footer />
|
||||
{/* any other components */}
|
||||
<Card.Background />
|
||||
</Card>
|
||||
)
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
### Card
|
||||
|
||||
Frame of the card, extends [ThemeableStack props](/docs/components/stacks#themeablestack), adding:
|
||||
|
||||
<PropsTable
|
||||
data={[
|
||||
{
|
||||
name: 'size',
|
||||
type: 'SizeTokens',
|
||||
required: false,
|
||||
description: `Passes size down to all sub-components when set for padding, arrow, borderRadius.`,
|
||||
},
|
||||
{
|
||||
name: 'unstyled',
|
||||
required: false,
|
||||
type: `boolean`,
|
||||
description: `Removes all default Gui styles.`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
### Card.Header
|
||||
|
||||
Extends [ThemeableStack](/docs/components/stacks#themeablestack), adding:
|
||||
|
||||
<PropsTable
|
||||
data={[
|
||||
{
|
||||
name: 'unstyled',
|
||||
required: false,
|
||||
type: `boolean`,
|
||||
description: `Removes all default Gui styles.`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
### Card.Footer
|
||||
|
||||
Extends [ThemeableStack](/docs/components/stacks#themeablestack), adding:
|
||||
|
||||
<PropsTable
|
||||
data={[
|
||||
{
|
||||
name: 'unstyled',
|
||||
required: false,
|
||||
type: `boolean`,
|
||||
description: `Removes all default Gui styles.`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
### Card.Background
|
||||
|
||||
Extends [YStack](/docs/components/stacks), set to `fullscreen` and `zIndex` below Header/Footer.
|
||||
|
||||
<PropsTable
|
||||
data={[
|
||||
{
|
||||
name: 'unstyled',
|
||||
required: false,
|
||||
type: `boolean`,
|
||||
description: `Removes all default Gui styles.`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@@ -191,7 +191,6 @@ export const docsRoutes = [
|
||||
label: 'Content',
|
||||
pages: [
|
||||
{ title: 'Avatar', route: '/ui/avatar' },
|
||||
{ title: 'Card', route: '/ui/card' },
|
||||
{ title: 'Image', route: '/ui/image' },
|
||||
{ title: 'ListItem', route: '/ui/list-item' },
|
||||
],
|
||||
|
||||
@@ -16,7 +16,6 @@ import type { ImageProps, XStackProps } from '@hanzo/gui'
|
||||
import {
|
||||
Adapt,
|
||||
Button,
|
||||
Card,
|
||||
H1,
|
||||
H2,
|
||||
H3,
|
||||
@@ -841,7 +840,10 @@ const componentsIn = {
|
||||
<>
|
||||
<ThemeTint>
|
||||
<Link asChild href="/docs/intro/installation">
|
||||
<Card
|
||||
<YStack
|
||||
bg="$background"
|
||||
position="relative"
|
||||
rounded="$true"
|
||||
render="a"
|
||||
transition="quickest"
|
||||
animateOnly={['transform']}
|
||||
@@ -851,32 +853,38 @@ const componentsIn = {
|
||||
hoverStyle={{ y: -2, bg: '$backgroundHover' }}
|
||||
pressStyle={{ y: 2, bg: '$color2' }}
|
||||
>
|
||||
<Card.Header gap="$2">
|
||||
<YStack z={10} mb="auto" p="$true" gap="$2">
|
||||
<H4 size="$4" color="$color8">
|
||||
Install
|
||||
</H4>
|
||||
<Paragraph size="$6" color="$color9">
|
||||
Set up an app.
|
||||
</Paragraph>
|
||||
</Card.Header>
|
||||
</YStack>
|
||||
|
||||
<Card.Footer>
|
||||
<XStack z={5} mt="auto" mb={0} p="$true">
|
||||
<ChevronRight position="absolute" b="$4" r="$4" color="$color11" />
|
||||
</Card.Footer>
|
||||
</Card>
|
||||
</XStack>
|
||||
</YStack>
|
||||
</Link>
|
||||
|
||||
<Card flex={1} flexBasis="auto">
|
||||
<Card.Header gap="$2">
|
||||
<YStack
|
||||
bg="$background"
|
||||
position="relative"
|
||||
rounded="$true"
|
||||
flex={1}
|
||||
flexBasis="auto"
|
||||
>
|
||||
<YStack z={10} mb="auto" p="$true" gap="$2">
|
||||
<H4 size="$4" color="$color9">
|
||||
Quick start
|
||||
</H4>
|
||||
<Paragraph size="$4" color="$color11">
|
||||
Choose from a few starters:
|
||||
</Paragraph>
|
||||
</Card.Header>
|
||||
</YStack>
|
||||
|
||||
<Card.Footer p="$6" pt={0}>
|
||||
<XStack z={5} mt="auto" mb={0} p="$6" pt={0}>
|
||||
<XStack position="relative" items="center" gap="$4" flex={1}>
|
||||
<Code flex={1} bg="$color4" p="$3" rounded="$4" size="$5">
|
||||
npm create hanzogui@latest
|
||||
@@ -898,8 +906,8 @@ const componentsIn = {
|
||||
Copy
|
||||
</Button>
|
||||
</XStack>
|
||||
</Card.Footer>
|
||||
</Card>
|
||||
</XStack>
|
||||
</YStack>
|
||||
</ThemeTint>
|
||||
</>
|
||||
</XStack>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Card, Paragraph, SizableText, Text, XStack, YStack } from '@hanzo/gui'
|
||||
import { Paragraph, SizableText, Text, XStack, YStack } from '@hanzo/gui'
|
||||
|
||||
import { CheckCircle } from '~/components/CheckCircle'
|
||||
import { ContainerLarge } from '~/components/Containers'
|
||||
@@ -21,14 +21,22 @@ const Features = ({ items, ...props }: any) => {
|
||||
return (
|
||||
<YStack gap="$4" {...props}>
|
||||
{items.map((feature, i) => (
|
||||
<Card key={i} p="$6" elevation="$1" $sm={{ p: '$4' }}>
|
||||
<YStack
|
||||
key={i}
|
||||
bg="$background"
|
||||
position="relative"
|
||||
rounded="$true"
|
||||
p="$6"
|
||||
elevation="$1"
|
||||
$sm={{ p: '$4' }}
|
||||
>
|
||||
<XStack render="li">
|
||||
<Text color="$green9">
|
||||
<CheckCircle />
|
||||
</Text>
|
||||
<Paragraph color="$gray11">{feature}</Paragraph>
|
||||
</XStack>
|
||||
</Card>
|
||||
</YStack>
|
||||
))}
|
||||
</YStack>
|
||||
)
|
||||
|
||||
@@ -6,7 +6,6 @@ import { memo, useEffect, useRef, useState } from 'react'
|
||||
import type { Heading, TextProps } from '@hanzo/gui'
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
H1,
|
||||
H2,
|
||||
H3,
|
||||
@@ -155,7 +154,9 @@ const OverlayCard = () => {
|
||||
|
||||
// {/* TODO elevation not overriding? */}
|
||||
return (
|
||||
<Card
|
||||
<YStack
|
||||
bg="$background"
|
||||
position="relative"
|
||||
borderWidth={1}
|
||||
borderColor="$borderColor"
|
||||
rounded="$6"
|
||||
@@ -184,7 +185,7 @@ const OverlayCard = () => {
|
||||
</Button>
|
||||
</Link>
|
||||
</YStack>
|
||||
</Card>
|
||||
</YStack>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { CardProps } from '@hanzo/gui'
|
||||
import { Card, H4, Paragraph, XStack, YStack } from '@hanzo/gui'
|
||||
import type { YStackProps } from '@hanzo/gui'
|
||||
import { H4, Paragraph, XStack, YStack } from '@hanzo/gui'
|
||||
import { useDemoProps } from '../hooks/useDemoProps'
|
||||
|
||||
export const Overview1 = () => {
|
||||
@@ -57,7 +57,7 @@ export type OverviewCardTypes = {
|
||||
badgeAfter?: string
|
||||
badgeState?: 'success' | 'failure' | 'indifferent'
|
||||
alternative?: boolean
|
||||
} & CardProps
|
||||
} & YStackProps
|
||||
|
||||
export const OverviewCard = ({
|
||||
title,
|
||||
@@ -71,7 +71,9 @@ export const OverviewCard = ({
|
||||
const demoProps = useDemoProps()
|
||||
|
||||
return (
|
||||
<Card
|
||||
<YStack
|
||||
position="relative"
|
||||
rounded="$true"
|
||||
backgroundColor="transparent"
|
||||
{...props}
|
||||
{...(alternative && {
|
||||
@@ -80,7 +82,10 @@ export const OverviewCard = ({
|
||||
p: 10,
|
||||
})}
|
||||
>
|
||||
<Card.Header
|
||||
<YStack
|
||||
z={10}
|
||||
mb="auto"
|
||||
p="$true"
|
||||
flex={1}
|
||||
flexBasis="auto"
|
||||
justify="space-between"
|
||||
@@ -119,7 +124,7 @@ export const OverviewCard = ({
|
||||
)}
|
||||
{badgeAfter && <Paragraph>{badgeAfter}</Paragraph>}
|
||||
</XStack>
|
||||
</Card.Header>
|
||||
</Card>
|
||||
</YStack>
|
||||
</YStack>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,13 +1,4 @@
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Input,
|
||||
Switch,
|
||||
TextArea,
|
||||
XStack,
|
||||
YStack,
|
||||
SizableText,
|
||||
} from '@hanzo/gui'
|
||||
import { Button, Input, Switch, TextArea, XStack, YStack, SizableText } from '@hanzo/gui'
|
||||
import type { ReactNode } from 'react'
|
||||
|
||||
export type PreviewComponent = {
|
||||
@@ -31,8 +22,17 @@ export const components: PreviewComponent[] = [
|
||||
{
|
||||
name: 'Card',
|
||||
component: () => (
|
||||
<Card borderWidth={1} borderColor="$borderColor" p="$4" width={300} elevation="$2">
|
||||
<Card.Header p="$3">
|
||||
<YStack
|
||||
bg="$background"
|
||||
position="relative"
|
||||
rounded="$true"
|
||||
borderWidth={1}
|
||||
borderColor="$borderColor"
|
||||
p="$4"
|
||||
width={300}
|
||||
elevation="$2"
|
||||
>
|
||||
<YStack z={10} mb="auto" p="$3">
|
||||
<XStack justify="space-between" items="center">
|
||||
<YStack gap="$1">
|
||||
<SizableText size="$5" fontWeight="600">
|
||||
@@ -43,16 +43,16 @@ export const components: PreviewComponent[] = [
|
||||
</SizableText>
|
||||
</YStack>
|
||||
</XStack>
|
||||
</Card.Header>
|
||||
<Card.Footer p="$3">
|
||||
</YStack>
|
||||
<XStack z={5} mt="auto" mb={0} p="$3">
|
||||
<XStack gap="$3" justify="flex-end">
|
||||
<Button size="$3">Cancel</Button>
|
||||
<Button size="$3" theme="blue">
|
||||
Save
|
||||
</Button>
|
||||
</XStack>
|
||||
</Card.Footer>
|
||||
</Card>
|
||||
</XStack>
|
||||
</YStack>
|
||||
),
|
||||
},
|
||||
{
|
||||
|
||||
@@ -18,7 +18,6 @@ import { timer } from '@hanzogui/timer'
|
||||
import React from 'react'
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
H1,
|
||||
H2,
|
||||
H3,
|
||||
@@ -48,7 +47,8 @@ if (shouldProfile) {
|
||||
}
|
||||
|
||||
// styled components with variants
|
||||
const StyledCard = styled(Card, {
|
||||
const StyledCard = styled(YStack, {
|
||||
position: 'relative',
|
||||
padding: '$4',
|
||||
borderRadius: '$4',
|
||||
backgroundColor: '$background',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import { Button, Card, Square, Theme, YStack, Text } from '@hanzo/gui'
|
||||
import { Button, Square, Theme, YStack, Text } from '@hanzo/gui'
|
||||
|
||||
import { TEST_IDS } from '../constants/test-ids'
|
||||
|
||||
@@ -8,7 +8,13 @@ export function ThemeChange() {
|
||||
<>
|
||||
<Inner level={0}>
|
||||
<Inner level={1}>
|
||||
<Card width={100} height={100} />
|
||||
<YStack
|
||||
backgroundColor="$background"
|
||||
position="relative"
|
||||
borderRadius="$true"
|
||||
width={100}
|
||||
height={100}
|
||||
/>
|
||||
</Inner>
|
||||
</Inner>
|
||||
</>
|
||||
|
||||
@@ -1,15 +1,4 @@
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
H2,
|
||||
H3,
|
||||
H4,
|
||||
Paragraph,
|
||||
Text,
|
||||
Theme,
|
||||
XStack,
|
||||
YStack,
|
||||
} from '@hanzo/gui'
|
||||
import { Button, H2, H3, H4, Paragraph, Text, Theme, XStack, YStack } from '@hanzo/gui'
|
||||
|
||||
import { TEST_IDS } from '../constants/test-ids'
|
||||
|
||||
@@ -182,14 +171,22 @@ export function V5ThemeBuilderOutput() {
|
||||
</Paragraph>
|
||||
<XStack gap="$3" flexWrap="wrap">
|
||||
<Theme name="yellow">
|
||||
<Card padding="$3" backgroundColor="$background" minWidth={140}>
|
||||
<YStack
|
||||
position="relative"
|
||||
borderRadius="$true"
|
||||
padding="$3"
|
||||
backgroundColor="$background"
|
||||
minWidth={140}
|
||||
>
|
||||
<Button testID="button-yellow" size="$3">
|
||||
Yellow
|
||||
</Button>
|
||||
</Card>
|
||||
</YStack>
|
||||
</Theme>
|
||||
<Theme name="red">
|
||||
<Card
|
||||
<YStack
|
||||
position="relative"
|
||||
borderRadius="$true"
|
||||
testID="card-red"
|
||||
padding="$3"
|
||||
backgroundColor="$background"
|
||||
@@ -198,10 +195,12 @@ export function V5ThemeBuilderOutput() {
|
||||
<Button testID="button-red" size="$3">
|
||||
Red
|
||||
</Button>
|
||||
</Card>
|
||||
</YStack>
|
||||
</Theme>
|
||||
<Theme name="green">
|
||||
<Card
|
||||
<YStack
|
||||
position="relative"
|
||||
borderRadius="$true"
|
||||
testID="card-green"
|
||||
padding="$3"
|
||||
backgroundColor="$background"
|
||||
@@ -210,10 +209,12 @@ export function V5ThemeBuilderOutput() {
|
||||
<Button testID="button-green" size="$3">
|
||||
Green
|
||||
</Button>
|
||||
</Card>
|
||||
</YStack>
|
||||
</Theme>
|
||||
<Theme name="blue">
|
||||
<Card
|
||||
<YStack
|
||||
position="relative"
|
||||
borderRadius="$true"
|
||||
testID="card-blue"
|
||||
padding="$3"
|
||||
backgroundColor="$background"
|
||||
@@ -222,7 +223,7 @@ export function V5ThemeBuilderOutput() {
|
||||
<Button testID="button-blue" size="$3">
|
||||
Blue
|
||||
</Button>
|
||||
</Card>
|
||||
</YStack>
|
||||
</Theme>
|
||||
</XStack>
|
||||
</YStack>
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
{
|
||||
"name": "@hanzogui/card",
|
||||
"version": "8.3.5",
|
||||
"source": "src/index.ts",
|
||||
"files": [
|
||||
"src",
|
||||
"types",
|
||||
"dist"
|
||||
],
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
"main": "./dist/cjs/index.js",
|
||||
"module": "./dist/esm/index.js",
|
||||
"types": "./types/index.d.ts",
|
||||
"exports": {
|
||||
"./package.json": "./package.json",
|
||||
".": {
|
||||
"types": "./types/index.d.ts",
|
||||
"react-native": "./dist/esm/index.js",
|
||||
"browser": "./dist/esm/index.js",
|
||||
"module": "./dist/esm/index.js",
|
||||
"import": "./dist/esm/index.js",
|
||||
"require": "./dist/cjs/index.js",
|
||||
"default": "./dist/esm/index.js"
|
||||
}
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "hanzogui-build --skip-native",
|
||||
"watch": "hanzogui-build --watch",
|
||||
"clean": "hanzogui-build clean",
|
||||
"clean:build": "hanzogui-build clean:build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hanzogui/core": "workspace:*",
|
||||
"@hanzogui/create-context": "workspace:*",
|
||||
"@hanzogui/helpers": "workspace:*",
|
||||
"@hanzogui/stacks": "workspace:*",
|
||||
"@hanzogui/web": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@hanzogui/build": "workspace:*",
|
||||
"react": "19.2.8",
|
||||
"react-native": "^0.87.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=19.2.8"
|
||||
},
|
||||
"module:jsx": "dist/jsx"
|
||||
}
|
||||
@@ -1,110 +0,0 @@
|
||||
import { YStack } from '@hanzogui/stacks'
|
||||
import type { GetProps, SizeTokens } from '@hanzogui/web'
|
||||
import { createStyledContext, styled, withStaticProperties } from '@hanzogui/web'
|
||||
|
||||
const CardContext = createStyledContext({
|
||||
size: '$true' as SizeTokens,
|
||||
})
|
||||
|
||||
export const CardFrame = styled(YStack, {
|
||||
name: 'Card',
|
||||
context: CardContext,
|
||||
|
||||
variants: {
|
||||
unstyled: {
|
||||
false: {
|
||||
size: '$true',
|
||||
backgroundColor: '$background',
|
||||
position: 'relative',
|
||||
},
|
||||
},
|
||||
|
||||
size: {
|
||||
'...size': (val, { tokens }) => {
|
||||
return {
|
||||
borderRadius: tokens.radius[val] ?? val,
|
||||
}
|
||||
},
|
||||
},
|
||||
} as const,
|
||||
|
||||
defaultVariants: {
|
||||
unstyled: process.env.GUI_HEADLESS === '1',
|
||||
},
|
||||
})
|
||||
|
||||
export const CardHeader = styled(YStack, {
|
||||
name: 'CardHeader',
|
||||
context: CardContext,
|
||||
|
||||
variants: {
|
||||
unstyled: {
|
||||
false: {
|
||||
zIndex: 10,
|
||||
backgroundColor: 'transparent',
|
||||
marginBottom: 'auto',
|
||||
},
|
||||
},
|
||||
|
||||
size: {
|
||||
'...size': (val, { tokens }) => {
|
||||
return {
|
||||
padding: tokens.space[val] ?? val,
|
||||
}
|
||||
},
|
||||
},
|
||||
} as const,
|
||||
|
||||
defaultVariants: {
|
||||
unstyled: process.env.GUI_HEADLESS === '1',
|
||||
},
|
||||
})
|
||||
|
||||
export const CardFooter = styled(CardHeader, {
|
||||
name: 'CardFooter',
|
||||
|
||||
variants: {
|
||||
unstyled: {
|
||||
false: {
|
||||
zIndex: 5,
|
||||
flexDirection: 'row',
|
||||
marginTop: 'auto',
|
||||
marginBottom: 0,
|
||||
},
|
||||
},
|
||||
} as const,
|
||||
|
||||
defaultVariants: {
|
||||
unstyled: process.env.GUI_HEADLESS === '1',
|
||||
},
|
||||
})
|
||||
|
||||
export const CardBackground = styled(YStack, {
|
||||
name: 'CardBackground',
|
||||
|
||||
variants: {
|
||||
unstyled: {
|
||||
false: {
|
||||
zIndex: 0,
|
||||
fullscreen: true,
|
||||
overflow: 'hidden',
|
||||
pointerEvents: 'none',
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
} as const,
|
||||
|
||||
defaultVariants: {
|
||||
unstyled: process.env.GUI_HEADLESS === '1',
|
||||
},
|
||||
})
|
||||
|
||||
export type CardHeaderProps = GetProps<typeof CardHeader>
|
||||
export type CardFooterProps = GetProps<typeof CardFooter>
|
||||
export type CardProps = GetProps<typeof CardFrame>
|
||||
|
||||
export const Card = withStaticProperties(CardFrame, {
|
||||
Header: CardHeader,
|
||||
Footer: CardFooter,
|
||||
Background: CardBackground,
|
||||
})
|
||||
@@ -1 +0,0 @@
|
||||
export * from './Card.tsx'
|
||||
@@ -1,21 +0,0 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"noEmit": false,
|
||||
"composite": false,
|
||||
"incremental": false,
|
||||
"rootDir": "src",
|
||||
"rewriteRelativeImportExtensions": true,
|
||||
"sourceMap": true,
|
||||
"inlineSourceMap": false,
|
||||
"paths": {},
|
||||
"module": "commonjs",
|
||||
"moduleResolution": "bundler",
|
||||
"outDir": "dist/cjs",
|
||||
"declaration": true,
|
||||
"declarationMap": false,
|
||||
"declarationDir": "dist/cjs/.types"
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": ["src/**/*.test.*", "src/**/__tests__/**", "src/**/*.stories.*"]
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"noEmit": false,
|
||||
"composite": false,
|
||||
"incremental": false,
|
||||
"rootDir": "src",
|
||||
"rewriteRelativeImportExtensions": true,
|
||||
"sourceMap": true,
|
||||
"inlineSourceMap": false,
|
||||
"paths": {},
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"outDir": "dist/esm",
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"declarationDir": "types"
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": ["src/**/*.test.*", "src/**/__tests__/**", "src/**/*.stories.*"]
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": true
|
||||
},
|
||||
"references": [
|
||||
{
|
||||
"path": "../../core/create-context"
|
||||
},
|
||||
{
|
||||
"path": "../../core/helpers"
|
||||
},
|
||||
{
|
||||
"path": "../../core/web"
|
||||
},
|
||||
{
|
||||
"path": "../stacks"
|
||||
}
|
||||
],
|
||||
"exclude": [
|
||||
"types",
|
||||
"dist",
|
||||
"**/__tests__"
|
||||
]
|
||||
}
|
||||
@@ -76,7 +76,6 @@
|
||||
"@hanzogui/animate-presence": "workspace:*",
|
||||
"@hanzogui/avatar": "workspace:*",
|
||||
"@hanzogui/button": "workspace:*",
|
||||
"@hanzogui/card": "workspace:*",
|
||||
"@hanzogui/checkbox": "workspace:*",
|
||||
"@hanzogui/collapsible": "workspace:*",
|
||||
"@hanzogui/component-helpers": "workspace:*",
|
||||
|
||||
@@ -8,7 +8,6 @@ export * from '@hanzogui/animate'
|
||||
export * from '@hanzogui/animate-presence'
|
||||
export * from '@hanzogui/avatar'
|
||||
export * from '@hanzogui/button'
|
||||
export * from '@hanzogui/card'
|
||||
export * from '@hanzogui/checkbox'
|
||||
export * from '@hanzogui/collapsible'
|
||||
export * from '@hanzogui/compose-refs'
|
||||
|
||||
@@ -80,9 +80,6 @@
|
||||
{
|
||||
"path": "../button"
|
||||
},
|
||||
{
|
||||
"path": "../card"
|
||||
},
|
||||
{
|
||||
"path": "../checkbox"
|
||||
},
|
||||
|
||||
@@ -422,7 +422,10 @@ test('the public menu explains; the launcher opens', () => {
|
||||
|
||||
// Every flagship has one, and it is a hanzo.ai page — never the app host
|
||||
// again under a second name.
|
||||
const flagships = ['chat', 'app', 'team', 'studio', 'bot', 'cloud', 'base']
|
||||
// Cloud and Team are what the platform does rather than products beside it,
|
||||
// so neither is in this list any more and Platform is the page that explains
|
||||
// all three.
|
||||
const flagships = ['chat', 'app', 'studio', 'bot', 'base', 'platform']
|
||||
for (const id of flagships) {
|
||||
const at = reg.indexOf(` id: '${id}',`)
|
||||
assert.ok(at > 0, `${id} is in the registry`)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@hanzogui/shell",
|
||||
"version": "8.3.15",
|
||||
"version": "8.3.16",
|
||||
"description": "Unified Hanzo shell — HanzoHeader (the one public bar: Hanzo mega-menu, ⌘K search, the canonical CTA pill, IAM identity), OrgHeader (the signed-in bar), UserOrgDropdown (the one org switcher), Masquerade, AskHanzo (the visitor chat), MeetHanzoMenu, ProductsMegaMenu, HanzoFooter, HanzoPreFooterCTA, HanzoAppLauncher + the canonical surface registry",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@@ -363,15 +363,6 @@ export const HANZO_PRODUCTS: HanzoProduct[] = [
|
||||
// `sees(stage)` before drawing it — and dropping the flag instead takes a
|
||||
// finished product out of the mega-menu and the footer for everybody.
|
||||
},
|
||||
{
|
||||
id: 'cloud',
|
||||
glyph: 'cloud',
|
||||
label: 'Hanzo Cloud',
|
||||
href: U.cloud,
|
||||
page: `${U.ai}/cloud`,
|
||||
tagline: 'Run the platform',
|
||||
boundary: PRODUCT_BOUNDARIES.cloud,
|
||||
},
|
||||
{
|
||||
id: 'dev',
|
||||
glyph: 'code',
|
||||
@@ -418,15 +409,6 @@ export const HANZO_PRODUCTS: HanzoProduct[] = [
|
||||
boundary: PRODUCT_BOUNDARIES.platform,
|
||||
flagship: true,
|
||||
},
|
||||
{
|
||||
id: 'team',
|
||||
glyph: 'users',
|
||||
label: 'Hanzo Team',
|
||||
href: U.team,
|
||||
page: `${U.ai}/team`,
|
||||
tagline: 'People and AI together',
|
||||
boundary: PRODUCT_BOUNDARIES.team,
|
||||
},
|
||||
{
|
||||
id: 'bot',
|
||||
glyph: 'bot',
|
||||
@@ -580,7 +562,10 @@ export const MEET_HANZO_GROUPS: MeetHanzoGroup[] = [
|
||||
{ id: 'agents', label: 'Managed agents', href: U.agents, glyph: 'cpu' },
|
||||
{ id: 'mcp', label: 'MCP tools', href: U.mcp, glyph: 'plug' },
|
||||
{ id: 'api', label: 'API platform', href: U.api, glyph: 'gateway' },
|
||||
{ id: 'cloud', label: 'All cloud products', href: U.cloud, glyph: 'cloud' },
|
||||
{ id: 'gateway', label: 'Gateway', href: U.gateway, glyph: 'gateway' },
|
||||
{ id: 'keys', label: 'API keys', href: U.keys, glyph: 'plug' },
|
||||
{ id: 'base', label: 'Base', href: U.base, glyph: 'layers' },
|
||||
{ id: 'status', label: 'Status', href: U.status, glyph: 'pulse' },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -1012,7 +997,10 @@ export const HANZO_FOOTER_COLUMNS: FooterColumn[] = [
|
||||
{ id: 'agents', label: 'Managed agents', href: U.agents },
|
||||
{ id: 'mcp', label: 'MCP tools', href: U.mcp },
|
||||
{ id: 'api', label: 'API platform', href: U.api },
|
||||
{ id: 'cloud', label: 'All cloud products', href: U.cloud },
|
||||
{ id: 'gateway', label: 'Gateway', href: U.gateway },
|
||||
{ id: 'keys', label: 'API keys', href: U.keys },
|
||||
{ id: 'base', label: 'Base', href: U.base },
|
||||
{ id: 'status', label: 'Status', href: U.status },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -311,9 +311,6 @@
|
||||
{
|
||||
"path": "pkgs/ui/button"
|
||||
},
|
||||
{
|
||||
"path": "pkgs/ui/card"
|
||||
},
|
||||
{
|
||||
"path": "pkgs/ui/checkbox-headless"
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user