マイグレーション

Would you like to use monorepo? (recommended) … No / Yes
What is the path to the monorepo? … ./workspaces/ui
What is the package name? … @workspaces/ui
Would you like your code inside a `src/` directory? … No / Yes
Would you like to use Prettier? … No / Yes
Would you like to use ESLint? … No / Yes

<Accordion.Root>
  <Accordion.Item>
    <Accordion.Button />
    <Accordion.Panel />
  </Accordion.Item>
</Accordion.Root>

const componentStyle = defineComponentStyle({
  base: {
    /* base style */
  },
  variants: {
    /* variant style */
  },
  sizes: {
    /* size style */
  },
  props: {
    /* props style */
  },
  compounds: {
    /* compound style */
  },
  defaultProps: {
    /* default props */
  },
})

type ComponentStyle = typeof componentStyle

export interface ComponentProps
  extends HTMLStyledProps<"div">,
    ThemeProps<ComponentStyle> {}

const {
  component,
  ComponentContext,
  PropsContext: ComponentPropsContext,
  useComponentContext,
  usePropsContext: useComponentPropsContext,
  withContext,
  useComponentProps,
} = createComponent<ComponentProps, ComponentStyle>("component", componentStyle)

export { ComponentPropsContext, useComponentPropsContext }

export const Component = withContext("div")()

export const Component: FC<ComponentProps> = ({
  ref: forwardedRef,
  className,
  onClick: onClickProp,
  ...rest
}) => {
  const ref = useRef<HTMLDivElement>(null)

  const onClick = useCallback(() => {}, [])

  return (
    <Component
      ref={mergeRefs(forwardedRef, ref)}
      onClick={handlerAll(onClickProp, onClick)}
      className={[className, "component"].join(" ")}
      {...rest}
    />
  )
}

export const Component: FC<ComponentProps> = (props) => {
  const ref = useRef<HTMLDivElement>(null)

  const onClick = useCallback(() => {}, [])

  return <Component {...mergeProps(props, { ref, onClick })()} />
}

const value = useMemo<BadgeProps>(() => ({ variant: "outline" }), [])

return (
  <BadgePropsContext value={value}>
    <Badge />
    <Badge />
    <Badge />
  </BadgePropsContext>
)

<Box as="button" />

<Button asChild>
  <CustomComponent />
</Button>

<Box focusRing="outline" />

<Box focusVisibleRing="outline" />

<Box {...{ "--custom-bg-color": "#1ba14c" }} bg="{custom-bg-color}" />

<Box css={{ "--bg": "#d4d4d4" }} {...{ "--fg": "black" }} />

<Box
  css={{ "--bg": "colors.bg.contrast" }}
  {...{ "--fg": "colors.fg.contrast" }}
/>

<Box w="calc(lg / 2)" />

<Box bg="color-mix(red.500, blue.500)" />

<Box _media={[{ type: "print", css: { color: "success" } }]} />

<Box containerType="inline-size" resize="horizontal">
  <Box
    _container={[{ minW: "320px", maxW: "560px", css: { color: "success" } }]}
  />
</Box>

const Button = styled("button", {
  base: {
    alignItems: "center",
    appearance: "none",
    cursor: "pointer",
    display: "inline-flex",
    fontWeight: "medium",
    justifyContent: "center",
    overflow: "hidden",
    position: "relative",
    rounded: "l2",
    transitionDuration: "moderate",
    transitionProperty: "common",
    userSelect: "none",
    verticalAlign: "middle",
    whiteSpace: "nowrap",
    _readOnly: { layerStyle: "readOnly" },
    _disabled: { layerStyle: "disabled" },
  },
})

const Button = styled("button", {
  base: {
    alignItems: "center",
    appearance: "none",
    cursor: "pointer",
    display: "inline-flex",
    fontWeight: "medium",
    justifyContent: "center",
    overflow: "hidden",
    position: "relative",
    rounded: "l2",
    transitionDuration: "moderate",
    transitionProperty: "common",
    userSelect: "none",
    verticalAlign: "middle",
    whiteSpace: "nowrap",
    _readOnly: { layerStyle: "readOnly" },
    _disabled: { layerStyle: "disabled" },
  },
  variants: {
    outline: {
      layerStyle: "outline",
      _hover: { layerStyle: "outline.hover" },
    },
    solid: {
      layerStyle: "solid",
      _hover: { layerStyle: "solid.hover" },
    },
    subtle: {
      layerStyle: "subtle",
      _hover: { layerStyle: "subtle.hover" },
    },
  },
})

<Box bg="bg.contrast" _hover={{ bg: "success" }} />

<Box bg={{ base: "bg.contrast", _hover: "success" }} />

<Box colorScheme="blue" bg="colorScheme.solid" color="colorScheme.contrast" />

<Box colorScheme="blue">
  <Box bg="colorScheme.solid" color="colorScheme.contrast" />
  <Box colorScheme="green" bg="colorScheme.subtle" color="colorScheme.fg" />
</Box>

const animation = useAnimation({
  _keyframes: {
    from: { translate: "0 0" },
    to: { translate: "100% 0" },
  },
  duration: "1s",
  iterationCount: "infinite",
  timingFunction: "linear",
})

return <Box animation={animation} />

<Box
  animationDirection="alternate"
  animationDuration="1s"
  animationIterationCount="infinite"
  animationTimingFunction="linear"
  _keyframes={{
    from: { translate: "0 0" },
    to: { translate: "100% 0" },
  }}
/>