Something went wrong. Try again.
A design system in a box. hip-ui.tngl.io/docs/introduction
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143import * as stylex from "@stylexjs/stylex";import { useEffect, useRef, useState } from "react";import { Button, Disclosure, DisclosurePanel } from "react-aria-components";import { examples } from "virtual:examples";
import { Card } from "@/components/card";import { CopyToClipboardButton } from "@/components/copy-to-clipboard-button";import { Flex } from "@/components/flex";
import { animationDuration } from "../components/theme/animations-duration.stylex";import { uiColor } from "../components/theme/color.stylex";import { mediaQueries } from "../components/theme/media-queries.stylex";import { radius } from "../components/theme/radius.stylex";import { ui } from "../components/theme/semantic-color.stylex";import { verticalSpace, size as sizeSpace, horizontalSpace,} from "../components/theme/semantic-spacing.stylex";
const styles = stylex.create({ card: { borderRadius: radius.lg, cornerShape: "squircle", overflow: "hidden", marginBottom: verticalSpace["7xl"], marginTop: verticalSpace["7xl"], }, preview: { padding: sizeSpace["2xl"], alignItems: "center", backgroundColor: uiColor.bgSubtle, containerType: "inline-size", display: "flex", flexDirection: "column", justifyContent: "center", minHeight: sizeSpace["18xl"], }, noPadding: { padding: 0, }, codeWrapper: { position: "relative", borderTopColor: uiColor.border2, borderTopStyle: "solid", borderTopWidth: 1, }, code: { /* eslint-disable @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles */ ":is(*) pre": { margin: 0, borderBottomLeftRadius: radius.lg, borderBottomRightRadius: radius.lg, paddingBottom: verticalSpace["3xl"], paddingLeft: horizontalSpace["3xl"], paddingRight: horizontalSpace["3xl"], paddingTop: verticalSpace["3xl"], }, /* eslint-enable @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles */ }, copyButton: { position: "absolute", right: horizontalSpace.xl, top: verticalSpace.xl, }, toggleButton: { borderWidth: 0, color: { default: uiColor.text1, ":is([data-hovered])": uiColor.text2, }, borderTopColor: uiColor.border1, borderTopStyle: "solid", borderTopWidth: 1, paddingBottom: verticalSpace.md, paddingLeft: horizontalSpace.xl, paddingRight: horizontalSpace.xl, paddingTop: verticalSpace.md, width: "100%", }, panel: { overflow: "clip", transitionDuration: { default: animationDuration.default, [mediaQueries.reducedMotion]: null, }, transitionProperty: "height", transitionTimingFunction: "ease-in-out", height: "var(--disclosure-panel-height)", },});
export function Example({ src: Component, noPadding = false,}: { src: (() => React.JSX.Element) & { slug: string }; noPadding?: boolean;}) { const code = examples[Component.slug]; const ref = useRef<HTMLDivElement>(null); const [textContent, setTextContent] = useState("error"); const [isOpen, setIsOpen] = useState(false);
useEffect(() => { // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect, react-hooks/set-state-in-effect setTextContent(ref.current?.textContent ?? "error"); }, [code]);
return ( <Card style={styles.card}> <Flex direction="column"> <div {...stylex.props(styles.preview, noPadding && styles.noPadding)}> <Component /> </div>
<Disclosure isExpanded={isOpen} onExpandedChange={setIsOpen}> <Button slot="trigger" {...stylex.props(styles.toggleButton, ui.bgUi)} > {isOpen ? "Hide Code" : "Show Code"} </Button> <DisclosurePanel {...stylex.props(styles.panel)}> <div {...stylex.props(styles.codeWrapper)}> <div ref={ref} {...stylex.props(styles.code)} // eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml dangerouslySetInnerHTML={{ __html: code ?? "" }} /> <CopyToClipboardButton style={styles.copyButton} text={textContent} /> </div> </DisclosurePanel> </Disclosure> </Flex> </Card> );}